Nice multi-level navigation CSS for an unordered list.

multi-level-nav.css

/* NAVIGATION */

/* Dark green: #4a5a19 */

/* Medium green: #2b350d */

/* Light green: #839158 */

.clear:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

html[xmlns] .clear { 
  display: block;
}

* html .clear { 
  height: 1%;
}

nav.top-nav { 
  background-color: #222; 
  height: 35px;
}

nav.top-nav ul {
  margin: 0px; 
  padding: 0px;
}

/* Top level */
nav.top-nav li {
  list-style: none; 
  float: left; 
  position: relative;
}

nav.top-nav li.drop a {
  padding-right: 30px;
}

nav.top-nav li a {
  display: block; 
  padding: 9px 23px 10px; 
  text-decoration: none; 
  background-color: #222; 
  font-size: 12px; 
  color: #fff;
  text-shadow: 0px -1px 0px #000;
}

nav.top-nav li a:hover, nav li.active a {
  background-color: #4a5a19;
}

nav.top-nav .dropdown {
  display: block; 
  float: right; 
  width: 7px; 
  height: 5px; 
  margin: -20px 15px 0px 12px;
}

/* Drop down */
nav.top-nav li ul {
  opacity: 0; 
  position: absolute; 
  top: 33px; 
  left: 0px; 
  background: #2b350d; 
  display: none;
  z-index: 100;
}

nav.top-nav li ul li {
  float: none!important; 
  border-bottom: 1px solid #4d5b22; 
  width: 125px;
}

nav.top-nav li ul li a { 
  background: #2b350d; 
  padding: 5px; 
  font-size: 11px
}

nav.top-nav li ul li a:hover {
  background-color: #4a5a19;
}

nav.top-nav li ul li.arrow { 
  height: 10px; 
  margin-top: -22px; 
  margin-bottom: 10px;
}