Simple Hover Menu Links

Submitted by Unrivaled Studio's » Learn how to turn a list into a menu with hovers.
Rating: 1.7/5 | 1,630 clicks | 1 comment | 0 saves | share | report

Comments on this tutorial

Tb-one.seDecember 21, 2007

You have some really unnecessary code here, to get the same result I would do something like this:

#menu_set { font-size: 9px; width: 150px; }
/* Cause the height are always set to auto. The font color will be defined in the <a>link and the text is also already aligned to the left. Margin and padding will be cleared in the <ul> */

#menu_set ul { margin: 0; padding: 0; list-style: none; }
/* list-style: none will delete the bullet. And same here with the font color */

#menu_set li { border-top: 1px solid #666; padding: 2px 3px; }
/* Why are you re-clearing the margin? Hex codes like this needs only 3 letters/numbers */

#menu_set li a { color: #000; text-decoration: none; font-weight: bold; }

#menu_set li a:hover { color: #B5B5B5; }
/* Text decoration and font weight is already defined */

Discuss this tutorial

You must be logged in to comment on a tutorial.