Menu with CSS3
HTML
<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>
<div>Favorite Languages</div>
<ul>
<li>CSS3</li>
<li>Javascript</li>
<li>c#.net</li>
<li>PHP</li>
<li>Java</li>
</ul>
</div>
<div>Favorite Languages</div>
<ul>
<li>CSS3</li>
<li>Javascript</li>
<li>c#.net</li>
<li>PHP</li>
<li>Java</li>
</ul>
</div>
<div>Favorite Languages</div>
<ul>
<li>CSS3</li>
<li>Javascript</li>
<li>c#.net</li>
<li>PHP</li>
<li>Java</li>
</ul>
</div>
CSS
/* 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;
}
/* ---------- */