CSS code
ul.drop, ul.drop li, ul.drop ul    { list-style: none; margin: 0; padding: 0; }ul.drop                            { position: relative; z-index: 597; float: left; }
ul.drop li                         { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; }
ul.drop ul                         { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; }
ul.drop ul li                      { float: none }
ul.drop ul ul                      { top: 1px; left: 99%; }
ul.drop li:hover > ul              { visibility: visible }

HTML code

<ul id="nav" class="drop">     <li><a href="./">Home</a></li>
     <li class="dir">About Us
          <ul>
               <li><a href="./">History</a></li>
               <li><a href="./">Our Vision</a></li>
               <li class="dir"><a href="./">The Team</a>
                    <ul>
                         <li><a href="./">Brigita</a></li>
                         <li><a href="./">John</a></li>
                         <li><a href="./">Michael</a></li>
                         <li><a href="./">Peter</a></li>
                         <li><a href="./">Sarah</a></li>
                    </ul>
               </li>
               <li><a href="./">Clients</a></li>
               <li><a href="./">Testimonials</a></li>
               <li><a href="./">Press</a></li>
               <li><a href="./">FAQs</a></li>
          </ul>
     </li>
     <li class="dir">Services
          <ul>
               <li><a href="./">Product Development</a></li>
               <li><a href="./">Delivery</a></li>
               <li><a href="./">Shop Online</a></li>
               <li><a href="./">Support</a></li>
               <li><a href="./">Training &amp; Consulting</a></li>
          </ul>
     </li>
     <li class="dir">Products
          <ul>
               <li class="dir"><a href="./">New</a>
                    <ul>
                         <li><a href="./">Corporate Use</a></li>
                         <li><a href="./">Private Use</a></li>
                    </ul>
               </li>
               <li class="dir"><a href="./">Used</a>
                    <ul>
                         <li><a href="./">Corporate Use</a></li>
                         <li><a href="./">Private Use</a></li>
                    </ul>
               </li>
               <li><a href="./">Featured</a></li>
               <li><a href="./">Top Rated</a></li>
               <li><a href="./">Prices</a></li>
          </ul>
     </li>
     <li><a href="./">Gallery</a></li>
     <li><a href="./">Events</a></li>
     <li><a href="./">Careers</a></li>
     <li class="dir"><a href="./">Contact Us</a>
          <ul>
               <li><a href="./">Enquiry Form</a></li>
               <li><a href="./">Map &amp; Driving Directions</a></li>
               <li><a href="./">Your Feedback</a></li>
          </ul>
     </li>
</ul>

CSS dropdown menu - Cross browser compatible

css

CSS