CSS for turning a list item in an unordered list into a drop down menu

navbarwdropdown.css

div {
  border-radius: 5px;
}

#header {
  z-index: 1;
  position: fixed;
  width: 99.0%;
  margin-top: -20px;
  height: 60px;
  background-color: #624235;
  margin-bottom: 10px;
}


#nav li {
  display: inline-block; 
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 5px;
  font-size: 18px;
  font-family: Helvetica, sans-serif;
  color: #ffffff;
}

#header a:hover {
  font-weight: bold;
}

#nav ul {
  position:absolute; 
  display:none;
  margin:0 0 0 0;
  padding: 0px; 
  list-style:none;
}
        
#nav ul li {
  width:125px; 
  float:left; 
  background: #624235;
  font-size: 14px; 
  margin: -5px; 
  padding: 10px;  
  border: 2px solid #ffffff;
  border-radius: 5px; 
}
                                             
/* display block will make the link fill the whole area of LI */
/* otherwise our "drop down" menu will go out to the side */

#nav ul a {
  display:block;  
  height:15px;
  padding: 8px 5px; 
  color:#666;
}
        
/* might need to throw this is */      
/* to deal with small ie6 small issue */
/* I have it commented out for now */


/* *html #nav ul {
    margin:0 0 0 -2px;
}     */