Posted By

troynt on 07/27/10


Tagged


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

jplr
michellebracken
abbyabigale


Pure CSS dropdown menu


 / Published in: HTML
 

URL: http://codesnipp.it/code/776

  1. /* An accessible Pure CSS dropdown menu */
  2. /* It won`t work in IE6 but it can easily fixed using JavaScript */
  3. /* by Ahmed El Gabri */
  4.  
  5. /* CSS */
  6.  
  7. ul {
  8. float: left;
  9. list-style: none;
  10. margin:0;
  11. padding:0;
  12. }
  13.  
  14. ul li {
  15. float: left;
  16. margin-right: 10px;
  17. }
  18.  
  19. ul a{
  20. display:block;
  21. }
  22.  
  23. ul li ul { /* this hides the menu from the screen but still visible for screen readers */
  24. position: absolute;
  25. left: -9999px;
  26. }
  27.  
  28. li:hover > ul {
  29. left: auto;
  30. }
  31.  
  32.  
  33. /* HTML */
  34.  
  35. <ul>
  36. <li><a href="#" title="home">home</a></li>
  37. <li><a href="#" title="about">about</a></li>
  38. <li><a href="#" title="portfolio">portfolio</a>
  39. <ul>
  40. <li><a href="#" title="level 1">level 1</a></li>
  41. <li><a href="#" title="level 1">level 1</a></li>
  42. </ul>
  43. </li>
  44. <li><a href="#" title="contact">contact</a></li>
  45. </ul>

Report this snippet  

You need to login to post a comment.