Как из этого меню сделать выпадающее вниз меню с подпунктами?
| CSS |
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
| #menu {clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ width:100%;/*ширина меню*/}
#menu ul {display:block;width:100%;height:auto;margin:0px;padding:0px;list-style:none;position:relative; border-bottom:1px solid #fed11c; margin-bottom:10px; margin-top:10px;}
#menu ul li{display:block; width:100%; height:auto; position:relative;}
#menu ul li a{
position:relative;
display:block;
width:100%;
height:auto;
box-sizing:border-box;
font-size:13px;
text-transform:uppercase;
font-weight:bold;
color:#e2760a;
line-height:1.2em;
padding:10px 15px;
border-top:1px solid #fed11c;
text-decoration:none;}
#menu ul li a:hover, #menu ul li:hover a{ color:#0A3CC1; }
#menu ul li ul { position:absolute;
top:0px;
left:100%;
display:none;
width:auto}
/*******показываем выпададающее меню при наведении ********/
#menu ul li:hover ul{display:block;}
#menu ul li ul li a { white-space:nowrap;text-transform:none;padding:5px 20px; background:#fff0a5; color:#e2760a;}
#menu ul li ul li a:hover{color:#0A3CC1;} |
|
| HTML5 |
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
| <div id=menu>
<ul>
<li><a href="#">1</a>
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
</ul>
</li>
<li><a href="#">2</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li><a href="#">3</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
<li><a href="#">4</a>
<ul>
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
</ul>
</li>
<li><a href="#">5</a>
<ul>
<li><a href="#">5.1</a></li>
<li><a href="#">5.2</a></li>
</ul>
</li>
<li><a href="#">6</a>
<ul>
<li><a href="#">6.1</a></li>
<li><a href="#">6.2</a></li>
</ul>
</li>
<li><a href="#">7</a>
<ul>
<li><a href="#">7.1</a></li>
<li><a href="#">7.2</a></li>
</ul>
</li>
<li><a href="#">8</a>
<ul>
<li><a href="#">8.1</a></li>
<li><a href="#">8.2</a></li>
</ul>
</li>
<li><a href="#">9</a>
<ul>
<li><a href="#">9.1</a></li>
<li><a href="#">9.2</a></li>
</ul>
</li>
<li><a href="#">10</a>
<ul>
<li><a href="#">10.1</a></li>
<li><a href="#">10.2</a></li>
</ul>
</li>
</ul>
</div> |
|
(
