Advanced Search

Menu With CSS Only

/ Published in: CSS
Save to your folder(s)
Simple 2 lines of CSS and you have a dropdown with hover.

Expand | Embed | Plain Text

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.