CSS显示：内联无效

Question

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/

感谢所有帮助！

Answer 1

@claustrofob是正确的，解决方案是inline-block 。 但是，@ Zenith也正确。 您需要修复标记。 我还将更改您编写样式的方式，而不是使用较长的元素选择器链，而是将一个类放在要定位的元素上，并以此方式对其进行样式设置。

Answer 2

您的标签有误。 <li><a href="#"<Categories 2</a> <li><a href="#">Categories 2</a>应该是<li><a href="#">Categories 2</a> 。 而且，正如@Zenith所说，您不能在nav后直接加上LI元素。

Answer 3

尝试，

#menu li{
    display: inline-block;
}

正如@Zenith指出的那样，您有无效的标记，而@Josefffs指出的是一些语法错误。

测试链接

Answer 4

我看到的问题是，您已经用另一个<li>标签包裹了<ul>标签定义的列表，该标签似乎隐藏了项目列表。

也尝试检查元素。