Menu With CSS Only


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

Simple 2 lines of CSS and you have a dropdown with hover.


Copy this code and paste it in your HTML
  1. <style>
  2. /* this is it */
  3. div#menuContainer > ul {display:none;}
  4. div#menuContainer:hover > ul {display:block;}
  5. /* ---------- */
  6.  
  7. /* this is styling */
  8. div#menuContainer > ul {
  9. cursor:pointer;
  10. }
  11.  
  12. div#menuContainer li:hover {
  13. background-color:red;
  14. }
  15.  
  16. div#menuContainer * {
  17. width:150px;
  18. border:solid 1px #000;
  19. }
  20. /* ---------- */
  21. ​</style>
  22.  
  23. <div id="menuContainer">
  24. <div>Favorite Languages</div>
  25. <ul>
  26. <li>CSS3</li>
  27. <li>Javascript</li>
  28. <li>c#.net</li>
  29. <li>PHP</li>
  30. <li>Java</li>
  31. </ul>
  32. </div>​

URL: http://jsfiddle.net/ryanwfiorini/ZFmXW/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.