CSS Dropdown menu/container? - html

Question

I'm planning to do a new sort of dropdown menu style but I'm unsure of how to do it, I want it so that it basically dropsdown a container.
I've kinda marked it out, but I'm unsure on how to do it?
HTML:
<div id="header">
<div class="nav">
<ul>
<li>Home</li>
<li>Community</li>
<li>Staff</li>
<li>Shop</li>
<li>Enter</li>
</ul>
</div>
CSS:
a:visited, a:link, a:active {
text-decoration: none;
color: white;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #4a8fbc;
}
div.nav {
font-family: 'Lato', sans-serif;
font-size: 14px;
margin-left: 200px;
margin-right: 200px;
float: right;
color: white;
line-height: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0 30px 0 0;
}
li a:hover {
color: #256690;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #7d7d7d;
padding: 6px;
text-decoration: none;
background-color: #f2f2f2;
}
http://jsfiddle.net/UwRJ2/

Answer 1

This should get you a good start :
DEMO
HTML :
<div id="header">
<div class="nav">
<ul>
<li>Home
<ul>
<li>lala</li>
<li>lala</li>
<li>lala</li>
</ul>
</li>
<li>Community</li>
<li>Staff</li>
<li>Shop</li>
<li>Enter</li>
</ul>
</div>
</div>
CSS I added to your existing code + I also changed the display property on the li elements to display:inline-block; :
ul li > ul{
display:none;
border:1px solid red;
color:red;
position:absolute;
}
ul li:hover > ul{
display:block;
}