Pure CSS Pull Down Menu

This was an excercise in humility, but after a few hours of banging my head I've come up with a script free, crossbrowser pull down menu with multiple levels.

This should work in IE7+, FF2+, Opera 9+

---

The CSS:

 <style type="text/css">
 
 body{
     background-color:black;
     color:gray;
     font:10pt Verdana;
 }
 
 .menu {
     position:relative;
     text-align:center;
     list-style: none;
     margin-left: auto;
     margin-right: auto;
     padding: 0px;
     text-transform:uppercase;
     background-color:black;
 }
 
 .menu li{
     position:relative;
     display:inline;
     cursor:pointer;
 }
 
 .menu li a{
     text-decoration:none;
     color:gray;
     width:100%;
     height:100%;
 }
 
 .menu li a:hover{
     color:black;
 }
 
 .menu li:hover{
     background-color:gray;
     color:black;
 }
 
 .menu li ul{
     position:absolute;
     white-space:nowrap;
     text-align:left;
     list-style:none;
     display:none;
     z-index:5;
     left:0%;
     top:1.15em;
     margin:0px;
     padding:0px;
     border:1px solid gray;
     background-color:black;
 }
 
 .menu li ul li{
     position:relative;
     left:0px;
     display: list-item;
     cursor:pointer;
 }
 
 .menu li ul li{
     position:relative;
     left:0px;
     cursor: pointer;
     width:200px;
 }
 
 .menu li ul li a{
     display:block;
     margin-left:3px;
     margin-right:3px;
 }
 
 .menu li:hover > ul{
     display:block;
 }
 
 </style>
 

The menu:

 <ul class="menu">
     <li><a href="home.html">Link1</a></li>
 
     <li><a href="news.html">Link2</a></li>
 
     <li>Drop Down 1
         <ul>
             <li><a href="#">Sub 1</a></li>
             <li><a href="#">Sub 2</a></li>
             <li><a href="#">Sub 3</a></li>
         </ul>
     </li>
 
     <li>Drop Down 2
         <ul>
             <li><a href="#">Sub 1</a></li>
              <li><a href="#">Sub 2</a></li>
              <li><a href="#">Sub 3</a></li>
         </ul>
     </li>
     <li>Drop Down 3
         <ul>
             <li><a href="#">Sub 1</a></li>
              <li><a href="#">Sub 2</a></li>
              <li><a href="#">Sub 3</a></li>
         </ul>
     </li>
     <li><a href="about.html">Link 3</a></li>
 </ul>
 

Simple enough for ya?

For multiple levels just continue the concept on the css hover selector, thats it.

Note: Use a doctype in your html page to trigger Strict Mode so proper rendering occurs