Advanced Search

CSS dropdown menu - Cross browser compatible

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. CSS code
  2. ul.drop, ul.drop li, ul.drop ul    { list-style: none; margin: 0; padding: 0; }ul.drop                            { position: relative; z-index: 597; float: left; }
  3. ul.drop li                         { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; }
  4. ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; }
  5. ul.drop ul                         { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; }
  6. ul.drop ul li                      { float: none }
  7. ul.drop ul ul                      { top: 1px; left: 99%; }
  8. ul.drop li:hover > ul              { visibility: visible }
  9.  
  10. HTML code
  11.  
  12. <ul id="nav" class="drop">     <li><a href="./">Home</a></li>
  13.      <li class="dir">About Us
  14.           <ul>
  15.                <li><a href="./">History</a></li>
  16.                <li><a href="./">Our Vision</a></li>
  17.                <li class="dir"><a href="./">The Team</a>
  18.                     <ul>
  19.                          <li><a href="./">Brigita</a></li>
  20.                          <li><a href="./">John</a></li>
  21.                          <li><a href="./">Michael</a></li>
  22.                          <li><a href="./">Peter</a></li>
  23.                          <li><a href="./">Sarah</a></li>
  24.                     </ul>
  25.                </li>
  26.                <li><a href="./">Clients</a></li>
  27.                <li><a href="./">Testimonials</a></li>
  28.                <li><a href="./">Press</a></li>
  29.                <li><a href="./">FAQs</a></li>
  30.           </ul>
  31.      </li>
  32.      <li class="dir">Services
  33.           <ul>
  34.                <li><a href="./">Product Development</a></li>
  35.                <li><a href="./">Delivery</a></li>
  36.                <li><a href="./">Shop Online</a></li>
  37.                <li><a href="./">Support</a></li>
  38.                <li><a href="./">Training &amp; Consulting</a></li>
  39.           </ul>
  40.      </li>
  41.      <li class="dir">Products
  42.           <ul>
  43.                <li class="dir"><a href="./">New</a>
  44.                     <ul>
  45.                          <li><a href="./">Corporate Use</a></li>
  46.                          <li><a href="./">Private Use</a></li>
  47.                     </ul>
  48.                </li>
  49.                <li class="dir"><a href="./">Used</a>
  50.                     <ul>
  51.                          <li><a href="./">Corporate Use</a></li>
  52.                          <li><a href="./">Private Use</a></li>
  53.                     </ul>
  54.                </li>
  55.                <li><a href="./">Featured</a></li>
  56.                <li><a href="./">Top Rated</a></li>
  57.                <li><a href="./">Prices</a></li>
  58.           </ul>
  59.      </li>
  60.      <li><a href="./">Gallery</a></li>
  61.      <li><a href="./">Events</a></li>
  62.      <li><a href="./">Careers</a></li>
  63.      <li class="dir"><a href="./">Contact Us</a>
  64.           <ul>
  65.                <li><a href="./">Enquiry Form</a></li>
  66.                <li><a href="./">Map &amp; Driving Directions</a></li>
  67.                <li><a href="./">Your Feedback</a></li>
  68.           </ul>
  69.      </li>
  70. </ul>
  71.  
  72.  
  73.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.