drop line css menu
Ik ben geen ster in css's menus en kan geen simpel voorbeeld vinden zo als ik wil. een ook zijn alleen met een hoop overige zooi waar ik niet op zit te wachten en het liefst heb ik ook deze structuur.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<ul>
<li><a href="#">link1</a>
<li><a href="#">Sub link1.1</a></li>
<li><a href="#">Sub link1.2</a></li>
<li><a href="#">Sub link1.3</a></li>
</li>
<li><a href="#">link2</a>
<li><a href="#">Sub link2.1</a></li>
<li><a href="#">Sub link2.2</a></li>
<li><a href="#">Sub link2.3</a></li>
</li>
</ul>
<li><a href="#">link1</a>
<li><a href="#">Sub link1.1</a></li>
<li><a href="#">Sub link1.2</a></li>
<li><a href="#">Sub link1.3</a></li>
</li>
<li><a href="#">link2</a>
<li><a href="#">Sub link2.1</a></li>
<li><a href="#">Sub link2.2</a></li>
<li><a href="#">Sub link2.3</a></li>
</li>
</ul>
BVD iedereen :D
Dit maak ik er in 10 minuten van...
Code (php)
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
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
<style>
/* Resetten van ul (standaard waarden verschillen per browser)*/
body, html{
padding: 0;
margin: 0;
}
.menu ul,
.menu ul li{
list-style: none;
margin: 0;
padding: 0;
}
.menu{
background:#351B00;
padding: 10px;
margin: 10px;
width: 780px;
height: 40px;
}
.menu a{
font-family: Arial, Helvetica, sans-serif;
color: #00CC99;
text-decoration: none;
font-size: 14px;
}
.menu .submenu a{
font-size: 12px;
}
.menu ul li.active,
.menu ul li.inactive{
float: left;
text-align: left;
margin: 0 15px 0 0;
}
.submenu{
display: none;
position: absolute;
left: 0;
padding: 0px 20px 15px; 20px;;
}
.submenu ul li{
float: left;
margin: 0 15px 0 0;
}
li:hover .submenu{
display: block;
}
</style>
<body>
<div class="menu">
<ul>
<li class="active"><a href="#">link1</a>
<div class="submenu">
<ul>
<li><a href="#">Sub link1.1</a></li>
<li><a href="#">Sub link1.2aef</a></li>
<li><a href="#">Sub link1.3eafe</a></li>
</ul>
</div>
</li>
<li class="inactive"><a href="#">link2</a>
<div class="submenu">
<ul>
<li><a href="#">Sub link1.1eafeafe</a></li>
<li><a href="#">Sub link1.2</a></li>
<li><a href="#">Sub link1.3</a></li>
</ul>
</div>
</li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
/* Resetten van ul (standaard waarden verschillen per browser)*/
body, html{
padding: 0;
margin: 0;
}
.menu ul,
.menu ul li{
list-style: none;
margin: 0;
padding: 0;
}
.menu{
background:#351B00;
padding: 10px;
margin: 10px;
width: 780px;
height: 40px;
}
.menu a{
font-family: Arial, Helvetica, sans-serif;
color: #00CC99;
text-decoration: none;
font-size: 14px;
}
.menu .submenu a{
font-size: 12px;
}
.menu ul li.active,
.menu ul li.inactive{
float: left;
text-align: left;
margin: 0 15px 0 0;
}
.submenu{
display: none;
position: absolute;
left: 0;
padding: 0px 20px 15px; 20px;;
}
.submenu ul li{
float: left;
margin: 0 15px 0 0;
}
li:hover .submenu{
display: block;
}
</style>
<body>
<div class="menu">
<ul>
<li class="active"><a href="#">link1</a>
<div class="submenu">
<ul>
<li><a href="#">Sub link1.1</a></li>
<li><a href="#">Sub link1.2aef</a></li>
<li><a href="#">Sub link1.3eafe</a></li>
</ul>
</div>
</li>
<li class="inactive"><a href="#">link2</a>
<div class="submenu">
<ul>
<li><a href="#">Sub link1.1eafeafe</a></li>
<li><a href="#">Sub link1.2</a></li>
<li><a href="#">Sub link1.3</a></li>
</ul>
</div>
</li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
Gewijzigd op 01/01/1970 01:00:00 door Pieter van Linschoten
Dit werkt alleen niet zo goed :)
Mijn oplossing: http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
Gr
RvW