HTML Drop Down Menu navigation doesn't show up - html

Question

I am trying to learn HTML/CSS and during the course I thought of creating a CSS based Drop Down Menu Navigation bar. I read almost all of the tutorials I could find and finally built it, but the problem is it doesn't work as expected, I got the Main menu working but, the lists are not showing up. Here's the structure of my HTML:
<div id="Header"/>
<div id="Navigation" >
<ul id="Menu-H">
<li id="HOME">HOME</li>
<li id="ITEMS">ITEMS</li>
<ul >
<li>New Item</li>
<li>Search Item</li>
</ul>
<li id="Category">CATALOG</li>
<li id="Inventory">INVENTORY</li>
</ul>
<a class="LogOutButton" href="#">LOG OUT</a>
And here is the CSS I built:
#Menu-H {
padding: 0;
margin: 0;
list-style-type: none;
margin-left: 50px;
}
#Menu-H li {
float:left;
}
#Menu-H li:hover {
background: #f4f4f4;
border-radius: 5px 5px 0px 0px;
}
#Menu-H li a {
//border-left: 2px solid blue;
//border-right: 2px solid blue;
//background-color: white;
display:block;
padding: 5px 15px 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF
}
#Menu-H li:hover a {
color: #161616;
text-shadow: 1px 1px 1px#FFFFFF;
}
/* Drop Down Menu.........*/
#Menu-H ul {
background: #161616;
background:rgba(255,255,255,0);
list-style: none;
display: none;
}
Menu-H ul li {
padding-top: 1px;;
float: none;
}
Menu-H li:hover ul {
display:block;
}
#Menu-H li:hover a {
background: #6b0c36;
}
#Menu-H li:hover ul li a:hover {
background: #333;
}
I can not find the reason.

Answer 1

Your HTML is't right, You need to place the secondary <ul> inside the parent <li>
<ul id="Menu-H">
<li id="HOME">HOME</li>
<li id="ITEMS">ITEMS
<ul>
<li>New Item</li>
<li>Search Item</li>
</ul>
</li>
<li id="Category">CATALOG</li>
<li id="Inventory">INVENTORY</li>
</ul>
Also you forgot to add the # in the CSS for two id-s. Here's a fiddle I made where you can see I made some changes that I was talking about and it works:
http://jsfiddle.net/SJQ9B/