CSS显示:内联无效

时间:2013-06-24 16:45:16

标签: html css

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;
}

结果如下所示:enter image description here

我似乎无法弄清楚为什么我的两个类别不会接受css display: inline。我在每个类别下面都有一个菜单,目前没有显示。当我删除“菜单不足”时,display:inline有效。

不工作JsFiddle:http://jsfiddle.net/LynwV/

感谢所有帮助!

4 个答案:

答案 0 :(得分:3)

@claustrofob是对的,inline-block是解决方案。但是,@ Zenith也是正确的。你需要修复你的标记。我也会改变你编写样式的方式,而不是长元素选择器链,在你想要定位的元素上放置一个类,并按照这种方式设置样式。

答案 1 :(得分:1)

你的标签错了。 <li><a href="#"<Categories 2</a>应为<li><a href="#">Categories 2</a>。 并且,正如@Zenith所说,你不能直接跟随LI元素的导航。

答案 2 :(得分:1)

尝试,

#menu li{
    display: inline-block;
}

正如@Zenith指出的那样,你有无效的标记,以及@Josefffs指出的一些破解的语法

Test Link

答案 3 :(得分:0)

我看到的问题是,您已将<ul>标记定义的列表包装为另一个<li>标记,该标记似乎隐藏了项目列表。

尝试使用inspect元素获取支持。