CSS: Only part of my menu are supposed to hide - html

Question

I'm trying to hide part of my menu. When I call display:none The entire menu disappears. I have id's to separate them so I don't get why this happens. Here's the code:
HTML:
<ul id="menu">
<li>Categories 1
<ul id="cat1">
<li>temp1</li>
<li>temp2</li>
<li>temp3</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;
}
Somewhat working demo: http://jsfiddle.net/ZfN7t/

Answer 1

When you're dealing with ul inside ul, it's usually easier to style if you give them different classes:
<ul id="menu">
<li class="menu-item">Categories 1
<ul id="cat1">
<li class="cat1-item">temp1</li>
<li class="cat1-item">temp2</li>
<li class="cat1-item">temp3</li>
</ul>
</li>
</ul>
Hide the temp1, temp2, temp3 like this:
.menu-item #cat1{
display:none;
}
To display on hover:
.menu-item:hover #cat1{
display:block;
}