Adding drop down effect on css menu - html

Question

*I exhaustedly searched this site for an answer before posting a question, I attempted multiple solutions and nothing worked to my exact codes. While you may find duplicate questions on this site. I don't consider it to be a duplicate unless the coding is EXACTLY the same as well as the solutions. Nothing on this site worked for my exact coding therefore I needed to post my exact code for help. *
I have a menu that looks like the one below. and the drop down on it. Right now the nested ul just simply spreads throughout the page. it needs to show up in a nice drop down section under administration. I have tried searching for this and asking my colleagues none of them have done it before. I have created a jsFiddle here: http://jsfiddle.net/z3Lpm/
<div id="menu">
<ul>
<li>Home</li>
<li>Administration
<ul>
<li>Products</li>
</ul>
</li>
</ul>
</div>
(not my full menu but you get the point.)
and then my css:
#menu{
width: 100%;
border: 1px solid #000;
height: 50px;
background-color:#181818;
font-family: Helvetica, sans-serif;
font-size: 13px;
}
#menu ul{
margin-top: 20px;
}
#menu ul li{
list-style-type: none;
display: inline;
margin-left: 50px;
}
#menu ul li a:link{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:visited{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
#menu ul li a:hover{
color: #FFF;
background-color: #81B101;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
}

Answer 1

Here, I didn't change up the colors or anything because I don't know what you are doing with them. Let me know if this works for you.
http://jsfiddle.net/talymo/LDNpG/
#menu{
background-color:#181818;
font-family: Helvetica, sans-serif;
font-size: 13px;
height:50px;
}
#menu ul{
list-style:none;
padding-top:15px;
}
#menu ul li{
padding:0px 20px;
width:auto;
float:left;
position:relative;
}
#menu ul li:hover > ul{
display:block;
}
#menu ul li a{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:hover{
color: #FFF;
background-color: #81B101;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
}
#menu ul li ul{
overflow:hidden;
padding:0;
margin:0;
display:none;
position:absolute;
top:20px;
}