How to create a horizontal css menu

The Horizontal CSS Menu is used in many web sites. This kind of menus are looks very attractive and good for web page's design. It increase the look of the web pages design.
So here we go:

Here is the CSS code:

#nav{
     float:right; 
     font-family:Arial, Helvetica, sans-serif; 
     font-weight:bold;
     font-size:12px;
     z-index:9999;
     color:#fff;
}
#nav a:link, #nav a:active{
     display:block;
     padding: 14px 35px;
     color:#999999;
     text-decoration:none;
     text-transform:uppercase; 
     background-image:url(nav_button_bg.jpg); 
     background-position:top left;
}
#nav li{
     float:left;
     position:relative;
}
#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none; 
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
     background-color:#2e2e2e;
     background-image:none;
}
#nav ul{
     position:absolute;
     width:13em;
     top:3.8em;
     display:none;
     z-index:1;
}
#nav li ul a{
     width:9em;
     float:left;
     background-color:#2e2e2e;
     background-image:none;
}
#nav a:hover,#nav li ul a:hover{
     color:#fff; 
     background-color:#292929;
}
#nav ul ul{
     top:auto;
}
#nav li ul ul{
     left:12em;
     margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
     display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
     display:block;
}

Here is the HTML code:

<ul id="nav">

     <li><a href="#">Home</a></li>
<li><a href="#">About</a>
          <ul>
  <li><a href="#">Philosophy</a></li>
               <li><a href="#">Work Ethic</a></li>
  <li><a href="">Team Member</a>
  <ul>
  <li><a href="#">Member One</a></li>
  <li><a href="#">Member Two</a></li>
  <li><a href="#">Member Three</a></li>
  </ul>
               </li>
  </ul>
  </li>
  <li><a href="#">Portfolio</a>
  <ul>
  <li><a href="#">Web Design</a></li>
  <li><a href="#">Identity</a></li>
  </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>