有人能指出我正确的方向吗?我已经把这个包围了一段时间了。我知道下拉菜单是通过包裹unordered lists
和list items
又名children
创建的,我似乎无法让它工作。这就是我所拥有的:
<div class="nav block">
<ul>
<li style="border-left:1px solid black;"><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#"> Porfolio</a></li>
</ul>
</li>
<li><a href="#">Reviews</a>
<ul>
<li><a href="#">Spellen</a></li>
</ul>
</li>
<li><a href="#">Releases</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
如果你有一些关于这个问题的输入,我将不胜感激。 谢谢你们!
修改
我使用absolute
定位来解决它。
.nav > ul > li{position:relative;}
.nav > ul > li > ul{display:none;position:absolute;top:0;left:0;}
.nav > ul > li:hover > ul{display:inline-block;}
答案 0 :(得分:2)
第一个巨大的问题,可能是主要问题:您的子列表必须包装在<li>
标记中:
<div class="nav block">
<ul>
<li style="border-left:1px solid black;" ><a href="#">Home</a></li>
<li>
<a href="#">About Us</a>
<ul>
<li><a href="#"> Porfolio</a></li>
</ul>
</li>
<li>
<a href="#">Reviews</a>
<ul>
<li><a href="#">Spellen</a></li>
</ul>
</li>
<li><a href="#">Releases</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
答案 1 :(得分:2)
喜欢这个
<强> DEMO 强>
<强> CSS 强>
li {
float:left;
position:relative;
margin:0 10px;
}
li li {
float:none;
}
li li a {
white-space:nowrap;
}
li ul {
position:absolute;
top:1.1em;
left:0;
display:none;
border:1px solid red;
}
li:hover ul {
display:block;
}
答案 2 :(得分:1)
UL (子菜单)应位于 LI (菜单内)
<div class="nav block">
<ul>
<li style="border-left:1px solid black;" ><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<ul>
<li><a href="#"> Porfolio</a></li>
</ul>
<li>
<a href="#">Reviews</a>
<ul style="display:none;"> <!-- Sub menu -->
<li><a href="#">Spellen</a></li>
</ul>
</li>
<li><a href="#">Releases</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>