Я пытаюсь реализовать строку меню с подменю с использованием CSS.Меню с подменю css
Demo http://jsfiddle.net/kgu/skg3ctu5/
HTML
<div class="menu">
<ul id="navmenu">
<li><a href="#"> Item1 </a></li>
<li><a href="#"> Item2 </a></li>
<li>
<a href="#"> Item3 </a>
<ul class="sub1">
<li><a href="#"> Item3.1 </a></li>
<li>
<a href="#"> Item3.2 </a>
<ul class="sub2">
<li><a href="#"> Item3.2.1 </a></li>
<li><a href="#"> Item3.2.2 </a></li>
<li><a href="#"> Item3.2.3 </a></li>
</ul>
</li>
<li><a href="#"> Item3.3 </a></li>
</ul>
</li>
<li><a href="#"> Item4 </a></li>
</ul>
</div>
CSS
* {
margin:0px;
padding:0px;
}
body {
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li {
list-style-type:none;
}
#navmenu li {
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1 {
position:absolute;
top:27px;
left:0px;
}
.sub2 {
position:absolute;
left:126px;
top:0px;
}
#navmenu a {
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
Я хочу, чтобы мой (подменю 1) .sub1
появиться горизонтально под меню нав. При наведении курсора на элемент 3 подменю 3.1 следует отображать под пунктом 1, пункт 3.2 должен появиться под пунктом 2, а пункт 3.3 должен появиться под пунктом 3.
Может ли кто-нибудь помочь? благодаря!
Может быть, это хорошая идея, если вы могли бы разместить весь код CSS выше. Также кажется, что выпадающее меню исчезает слишком рано (невозможно выбрать). – Stickers
Я отправил остальную часть css. Падение вниз немного багги. Но я также предлагаю другое решение. – floor
@floor Это не работает. Я пытаюсь создать панель меню, в которой элементы sub1 (подменю 1) расположены горизонтально под элементами главного меню. – user3788040