HTML:
<!-- MENU -->
<nav id="menu">
<li><a href="#">Categories 1</a>
<ul>
<li><a href="#">temp1</a></li>
<li><a href="#">temp2</a></li>
<li><a href="#">temp3</a></li>
</ul>
</li>
<li><a href="#"<Categories 2</a>
<ul>
<li><a href="#">temp1</a></li>
<li><a href="#">temp2</a></li>
<li><a href="#">temp3</a></li>
</ul>
</li>
</nav>
CSS:
#menu {
background-color: #0000FF;
height: 20px;
padding: 15px 0 10px;
margin-bottom: 20px;
font: 12px 'DroidSansBold', Tahoma,sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 3px 2px 3px #000;
border-radius: 5px;
text-align: center;
}
#menu li{
display: inline;
}
#menu li a {
color: #fff;
text-decoration: none;
margin: 0 120px;
}
#menu li ul li{
display: none;
}
#menu li a:hover{
color: #dc692e;
}
结果如下所示:
我似乎无法弄清楚为什么我的两个类别不会接受css display: inline
。我在每个类别下面都有一个菜单,目前没有显示。当我删除“菜单不足”时,display:inline
有效。
不工作JsFiddle:http://jsfiddle.net/LynwV/
感谢所有帮助!
答案 0 :(得分:3)
@claustrofob是对的,inline-block
是解决方案。但是,@ Zenith也是正确的。你需要修复你的标记。我也会改变你编写样式的方式,而不是长元素选择器链,在你想要定位的元素上放置一个类,并按照这种方式设置样式。
答案 1 :(得分:1)
你的标签错了。 <li><a href="#"<Categories 2</a>
应为<li><a href="#">Categories 2</a>
。
并且,正如@Zenith所说,你不能直接跟随LI元素的导航。
答案 2 :(得分:1)
答案 3 :(得分:0)
我看到的问题是,您已将<ul>
标记定义的列表包装为另一个<li>
标记,该标记似乎隐藏了项目列表。
尝试使用inspect元素获取支持。