20.03.2014 14:25:42 Горизонтальное выпадающее меню Сообщение #1
Weissesmann
Новичок
Дата регистрации:
11.11.2013 19:02:11
Сообщений: 6
Хочу потренироваться в верстке. Решил сделать горизонтальное меню, при наведении на пункт которого подпункты также выпадают горизонтально.
html стандартный.
<ul>
<li>item1
<ul>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
</ul>
</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
css набросал такой:
ul{
width:100%;
height:30px;
list-style: none;
}
ul li{
float: left;
margin: 0 30px 0;
position: relative;
}
ul li ul{
position:absolute;
top:15px;
left:-10000px
}
ul li:hover ul{
left:0px;
}
ul li ul li {
color: red;
float: left;
}
Почему-то, вложенные пункты меню не хотят также выстраиваться в линию, и игнорируют float: left. Подскажите, в чем здесь причина?
html стандартный.
<ul>
<li>item1
<ul>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
</ul>
</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
css набросал такой:
ul{
width:100%;
height:30px;
list-style: none;
}
ul li{
float: left;
margin: 0 30px 0;
position: relative;
}
ul li ul{
position:absolute;
top:15px;
left:-10000px
}
ul li:hover ul{
left:0px;
}
ul li ul li {
color: red;
float: left;
}
Почему-то, вложенные пункты меню не хотят также выстраиваться в линию, и игнорируют float: left. Подскажите, в чем здесь причина?