Advanced Search

Return to Snippet

Revision: 56682
at April 9, 2012 21:05 by ryanfiorini
Initial Code 
<style>
/*  this is it */
div#menuContainer > ul {display:none;}
div#menuContainer:hover > ul {display:block;}
/*  ---------- */

/*  this is styling */
div#menuContainer > ul {
    cursor:pointer;
}

div#menuContainer li:hover {
    background-color:red;
}

div#menuContainer * {
    width:150px;
    border:solid 1px #000;
}
/*  ---------- */
​</style>

<div id="menuContainer">
    <div>Favorite Languages</div>
    <ul>
        <li>CSS3</li>
        <li>Javascript</li>
        <li>c#.net</li>
        <li>PHP</li>
        <li>Java</li> 
    </ul>            
</div>​
Initial URL 
http://jsfiddle.net/ryanwfiorini/ZFmXW/
Initial Description 
Simple 2 lines of CSS and you have a dropdown with hover.
Initial Title 
Menu With CSS Only
Initial Tags 
CSS3
Initial Language 
CSS