html - CSS：我的菜单只有一部分应该隐藏

Question

我试图隐藏我的部分菜单。当我打电话时display:none整个菜单消失。我有 id 将它们分开，所以我不明白为什么会发生这种情况。这是代码：

HTML：

        <ul id="menu">
            <li><a href="#">Categories 1</a>
                <ul id="cat1">
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </ul>

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

#menu li a {
  color: #fff;
  text-decoration: none;
  margin: 0 120px;
}

#cat1 li{
display: block;
padding: 10px;
}  

#cat1 li a{
background-color: #0000FF;
padding: 10px;
border-radius: 5px;
}

有点工作演示：http: //jsfiddle.net/ZfN7t/

Answer 1

当你在 ul 中处理 ul 时，如果你给它们不同的类，通常更容易设置样式：

<ul id="menu">
        <li class="menu-item"><a href="#">Categories 1</a>
            <ul id="cat1">
                <li class="cat1-item"><a href="#">temp1</a></li>
                <li class="cat1-item"><a href="#">temp2</a></li>
                <li class="cat1-item"><a href="#">temp3</a></li>
            </ul>
        </li>
</ul>

像这样隐藏 temp1、temp2、temp3：

.menu-item #cat1{
    display:none;
}

在悬停时显示：

.menu-item:hover #cat1{
    display:block;
}