Advanced Search

Pure CSS dropdown menu

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.