Internet Explorer 7: CSS Drop Down Navigation

One CSS fix the Internet Explorer 7 Team promised with the new version was the ability to add pseudo classes to arbitrary elements. They made good on that promise.

For example: adding :hover to a li

If you look at the significance of this you would have to think back to the days of the incredibly bloated javascript/dhtml drop down menus.

Gone are those days! Now we can make super-lean menu systems all with proper markup. Minus the (pretty) factor we can now make a drop down menu using a simple unorderd list and 2 simple CSS rules.

CSS
li ul {display:none;}
li:hover ul {display:block}

HTML

<ul>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
</ul>
</li>
</ul>

You may also like...

I would love to hear from you.

%d bloggers like this: