Adding drop down effect on css menu

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><a href="#">Home</a></li> 
   <li><a href="#">Administration</a> 
       <ul> 
           <li><a href="#">Products</a></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;
        }