Live Example: (Read the CSS Newbie article)

Source Code: (Save the Source)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSSnewbie Example: Horizontal CSS Dropdown Menus</title>
<style>
/* These styles just pretty up the page a bit. */
body {
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;
   background-color: #eee; }
#wrap {
   position: relative;
   font-size: 1.2em;
   width: 700px;
   padding: 50px 20px;
   margin: 0 auto; 
   background-color: #fff;
   position: relative; }

/* These styles create the dropdown menus. */
#navbar {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;}
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 8px;
   text-transform: uppercase;
   text-decoration: none; 
   color: #999;
   font-weight: bold; }
#navbar li a:hover {
   color: #000; }
#navbar li ul {
   display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: left; }
#navbar li:hover li a, #navbar li.hover li a {
   color: #000; }
#navbar li li a:hover {
   color: #357; }
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</head>
<body>
   <div id="wrap">
      <ul id="navbar">
         <li><a href="#">Exhibits and Events</a>
            <ul>
               <li><a href="#">Current Exhibit</a></li>
               <li><a href="#">Coming Exhibit</a></li>
               <li><a href="#">Events</a></li>
            </ul>
         </li>
         <li><a href="#">About Us</a>
            <ul>
               <li><a href="#">About 1</a></li>
               <li><a href="#">About Two</a></li>
               <li><a href="#">Third About</a></li>
            </ul>         
         </li>
         <li><a href="#">Contact</a>
            <ul>
               <li><a href="#">Via Email</a></li>
               <li><a href="#">Stalk Us Elsewhere</a></li>
            </ul>         
         </li>
         <li><a href="#">Press</a>
            <ul>
               <li><a href="#">Bench Press</a></li>
               <li><a href="#">Military Press</a></li>
               <li><a href="#">Press 'n Seal</a></li>
            </ul>         
         </li>
      </ul>
      <p><a href="/horizontal-dropdown-menus/">Back to the original CSSnewbie article.</a></p>
      <p>Ut fermentum ipsum sit amet libero. Duis fringilla libero sit amet nisl. Cras tincidunt tortor. Praesent consectetuer orci vel ipsum. Nullam tincidunt, lectus non iaculis malesuada, erat mi pulvinar enim, id laoreet tellus est sed felis. Etiam pretium, sem non fringilla tempus, arcu nulla eleifend eros, sed blandit mauris lacus et purus. Aenean et quam. Proin in ante. Nullam sodales lacinia dolor. Duis pharetra cursus tellus. Proin quam massa, imperdiet at, fermentum in, auctor vitae, eros.</p>
   </div>

</body>
</html>