Horizontal drop-down CSS menu

 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
/*
Example:
<ul class="menu-h-d">
<li><a href="#">level 1</a></li>
<li><a href="#">level 1</a></li>
<li><a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a>
....
</li>
</ul>
</li>
</ul>
</li>
</ul>
*/
.menu-h-d { min-height: 24px; border-left: 1px solid #ccc; }
.menu-h-d li { float: left; display: block; position: relative; border: 1px solid #ccc; border-width: 1px 1px 1px 0px; list-style: none; }
.menu-h-d a { text-decoration: none; padding: 2px 10px; display: block; }
.menu-h-d ul { display: none; position: absolute; top: 22px; left: -1px; width: 160px; background: #fff; border: 0; border-bottom: 1px solid #ccc; }
.menu-h-d ul ul { left: 100%; top: -1px; }
.menu-h-d li li { float: none; border-width: 1px 1px 0px 1px; }
.menu-h-d li:hover { background: #ccc; }
.menu-h-d a:hover { color: #fff; }
.menu-h-d li:hover ul ul,
.menu-h-d li:hover ul li:hover ul ul { display: none; }
.menu-h-d li:hover ul,
.menu-h-d li:hover ul li:hover ul,
.menu-h-d li:hover ul li:hover ul li:hover ul { display: block; }