CSS dropdown menu - Cross browser compatible


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



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.