我正在尝试制作一个带有四列子菜单的导航栏。我编写了大部分内容,但是在创建子菜单时我发现了问题。
这是我的 HTML:
<div id="navigation">
<ul>
<li class="current">
<a href="" class="">Home</a>
</li>
<li class="sub-menu">
<a href="">Our Products</a>
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
<a href="">Main Menu Item</a>
</li>
<li class="one">
<a href="">Main Menu Item</a>
</li>
<li class="one">
<a href="">Main Menu Item</a>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="two">
<img src="" />
<a href="">Promoting Peace in the Niger Delta</a>
</li>
<li class="three">
<img src="" />
<a href="">Promoting Peace in the Niger Delta</a>
</li>
<li class="four">
<img src="" />
<a href="">Promoting Peace in the Niger Delta</a>
</li>
<li class="five">
<img src="" />
<a href="">Promoting Peace in the Niger Delta</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
<a href="">Service Maintenance</a>
</li>
<li class="sub-menu">
<a href="">Frequently Ask Questions</a>
<li class="sub-menu">
<a href="">Our Products</a>
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
<a href="">Main Sub Item</a>
</li>
<li class="one">
<a href="">Main Sub Item</a>
</li>
<li class="one">
<a href="">Main Sub Item</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
希望有人能帮帮我。 谢谢。
最佳答案
问题是容器宽度定义为 300px
#navigation ul li > div.product {
width: 300px;
}
它的子元素占据了 100% 的空间。所以你需要确保他们有空间向左浮动。
#navigation div.col {
float: left;
height:200px;
width: 25%;
}
希望对您的问题有所帮助。
关于html - 使用 CSS 和 HTML 创建下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17865432/