Orden menú css
Publicado por Jordi (2 intervenciones) el 01/03/2019 10:01:21
Hola:
Tengo un menu css que muestro a continuación cual no me gusta el orden que tiene...
Así es como lo tengo:
Me gustaría que quedara uno debajo de otro hasta que llegara al tope del height y entonces siguiera en el lado derecho otra fila tal como muestro en esta imagen:
El código html es este:
El código CSS es este:
Gracias de antemano.
Tengo un menu css que muestro a continuación cual no me gusta el orden que tiene...
Así es como lo tengo:
Me gustaría que quedara uno debajo de otro hasta que llegara al tope del height y entonces siguiera en el lado derecho otra fila tal como muestro en esta imagen:
El código html es este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<nav>
<ul>
<? $result = mysqli_query($link, "SELECT * FROM categorias WHERE id_cat='0' ORDER BY orden ASC");
while ($row = mysqli_fetch_assoc($result)) {
?>
<li class="submenu"><a href="#" title="Unser Produktsortiment"><? echo $row['name']; ?></a>
<ul class="megamenu">
<? $result1 = mysqli_query($link, "SELECT * FROM categorias WHERE id_cat='".$row['id']."' ORDER BY orden ASC");
while ($row1 = mysqli_fetch_assoc($result1)) {
?>
<li class="re">
<h4><? echo $row1['name']; ?></h4>
<ul>
<? $result2 = mysqli_query($link, "SELECT * FROM categorias WHERE id_cat='".$row1['id']."' ORDER BY orden ASC");
while ($row2 = mysqli_fetch_assoc($result2)) {
?>
<li><a href="#"><? echo $row2['name']; ?></a></li>
<? } ?>
</ul></li>
<? } ?>
</ul>
</li>
<? } ?>
</ul>
</nav>
El código CSS es este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
nav {font-family: 'Open Sans', sans-serif;
max-width:1170px;width:100%;margin:0 auto;
font-size: 15px;
color:#777;
}/* first stage */nav > ul {
position: relative; display: flex; width: 1170px; margin: 0 auto; padding: 0;}nav a { display: block;text-decoration: none;
}nav ul li {list-style: none;
transition: 0.5s;
}nav > ul > li > a {
border-left: 1px solid #E0E3DD;
border-right: 1px solid #E0E3DD;
color:#333;
padding: 14px 25px;}nav ul > li.submenu > a:after {
/* position: relative;
float: right;
content: '';
margin-left: 10px;
margin-top: 8px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 5px solid transparent; */}nav ul > li.submenu:hover > a:after {
/* margin-top: 2px;
border-top: 5px solid transparent;
border-bottom: 5px solid #fff; */}nav > ul > li:hover {
/* background: #4096ee; */}/* second stage (the mega-menu) */nav ul.megamenu {
position: absolute;display: inline-table;
flex-wrap: wrap;
width: 1170px;top: -9999px;
left: 0; padding: 40px 40px 0 40px;background: #F4F5F3;
text-align: left;
border-top: 1px solid #E0E3DD;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
z-index: 1;
}nav ul li:hover ul.megamenu {
top: 100%;
}/* third stage (child-menus in the mega-menu) */nav ul.megamenu .re {
width: 20%;
margin-bottom: 20px;
color: #333;
box-shadow: none;
float:left;}nav ul.megamenu h4 {
font-size:13px;
font-weight:600;
line-height:18px;
}nav ul.megamenu .re ul li {
display: block;}nav ul.megamenu .re ul li a {
font-size:13px;
font-weight:400;
line-height:22px;
transition: 0.5s;
color: #666;
}nav ul.megamenu .re ul li a:hover {
color: #78b800;
}Gracias de antemano.
Valora esta pregunta
0