Simple expanding menu using style sheets, this menu expands on hover of the parent menu item. This version only works in Firefox and IE 7 and later (might work in safari and Chrome but I've not tested it)
CSS
1: <style>
2: .menu li ul,.menu li:hover ul li ul
3: {
4: display: none;
5: list-style-type: none;
6: }
7:
8: .menu li:hover ul,.menu li:hover ul li:hover ul
9: {
10: display: list-item;
11: }
12: </style>
HTML
1: <ul class="menu">
2: <li>menu 1
3: <ul>
4: <li>sub menu 11
5: <ul>
6: <li>sub sub menu 11</li>
7: <li>sub sub menu 11</li>
8: </ul>
9: </li>
10: <li>sub menu 12
11: <ul>
12: <li>sub sub menu 12</li>
13: <li>sub sub menu 12</li>
14: </ul>
15: </li>
16: </ul>
17: </li>
18: <li>menu 2
19: <ul>
20: <li>sub menu 2</li>
21: <li>sub menu 2</li>
22: </ul>
23: </li>
24: <li>menu 3
25: <ul>
26: <li>sub menu 3</li>
27: <li>sub menu 3</li>
28: </ul>
29: </li>
30: </ul>
The sub menus only display when you hover over the parent which does make it a bit clunky, the principles can be used to make a smoother operating menu either with javascript or using classed HTML.
How it works
It is a really simple use of style sheet, all it does is not display the sub list item unless there parent has the pseudo class hover. The hide is done by: "display: none;" and the reveal by: "display: list-item;". It really is that simple and that is the beauty of it.
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5