How to Style an Unordered List with CSS [con't]

If we use the CSS from example list one we get the following results.

‡ Part Two/Step 1

The span information is displayed within each link, as you would expect. Our aim is to hide the span information and only show it on hover.

Styling

Step 2

Hiding the Span Information

To hide the spans all we need to do is style them using display none:

#menu a span { display:none; }

‡ Part Two/Step 2

The span is now normally hidden from view.

Step 3

Showing the Span Information on Hover

All that is necessary to make the span show up is to style it using display block.

#menu a:hover span { display:block; }

It is important to note that IE6 has a :hover bug such that it will only work if triggered by a change in properties of any of the following commonly used styles. In our case we have a change of background to trigger the :hover pseudo class.

• background
• display
• float
• position
• border
• height
• margin
• padding
• text-align
• text-indent
• white-space
• visibility

‡ Part Two/Step 3

If you now hover over each link it will expand to show the contents of the span.

Step 4

Moving the Span out of the Menu Links

This is not very user friendly as the menu items jump about and it's not very clear what is happening.

What we need is a method of placing the span information in a box of its own so that it doesn't affect the menu list. This can be done by giving the span an absolute position which will take it out of the normal page flow and allow us to position it where we like.

In order for us to control the absolute position relative to the menu we will need to give the menu a relative position:.

#menu { position:relative; /* ADDED */ padding:0; margin:0; width:0; } #menu a:hover span { display:block; position:absolute; /* ADDED */ left:10em; /* ADDED */ top:0; /* ADDED */ }

• position:relative; - gives the #menu a relative position so that the absolute position of the span can be controlled.
• position:absolute; - gives the span an absolute position.
• left:10em; - sets the left position at 10em so that it will appear to the right of the menu and have a small clearance.
• top:0; - sets the top of the span in line with the top of the menu.

‡ Part Two/Step 4

The span information has now been moved out of the menu links and placed to the right, but it could use a bit more styling.

Step 5

Setting up the Size and Color of the Span

#menu a:hover span { display:block; position:absolute; left:10em; top:0; text-align:left; /* ADDED */ padding:0.5em; /* ADDED */ width:24em; /* ADDED */ background-color:#eee; /* ADDED */ color:#000; /* ADDED */ border:1px solid #808; /* ADDED */ }

• text-align:left; - the span text is center aligned the same as the links. This will left align the text.
• padding:0.5em; - adds a little padding to the span text.
• width:24em; - gives the span a width of 24em.
• background-color:#eee; - sets the background color to light grey.
• color:#000; - makes the text color black.
• border:1px solid #808; - adds a purple border to make the link bolder.

‡ Part Two/Step 5

The span is now neatly styled in a light grey box with a purple border with the image under the painter's name. The text, however, starts at the bottom right of the image.

Step 6

Styling the Span Image

It would be nice if the text were to start in line with the top of the image.

#menu img { border:1px solid #000; float:left; margin:0.25em 1em 0.5em 0; }

• border:1px solid #000; - adds a 1px black border around the image.
• float:left; - this will float the image to the left (it's already at the left hand side!) and will cause the text to start in line with the top of the image.
• margin:0.25em 1em 0.5em 0; - adds a small margin around the image, except on the left hand side, so that the text has some clearance.

‡ Part Two/Step 6

The text now starts in line with the top of the image.

Step 7

Styling the Span First Line

Just one last step before we are finished. It would be nice if the first line of the span stood out a bit more.

We can use the pseudo class :first-line to style just the painter's name and his birth/death dates:

#menu a:hover span:first-line { font-weight:bold; font-size:1.2em; color:#808; }

• font-weight:bold; - makes the first line text bold.
• font-size:1.2em; - makes the font slightly larger.
• color:#808; - changes the text color to purple.

‡ Example List Two

It's done. We now have a pop up box with information about each menu item.

Part Three

Step One

Re-styling the Pop-up

We don't need to stop there.

Wouldn't it be nice if the pop-up box were to track our menu items instead of staying fixed at the top of the menu?

If we had a long list of items we wouldn't want to look to the top of the list to see the information; it would be much more convenient if it were to appear alongside each item.

With a little change of style this too is possible.

The current position of the span information is determined by the relative position styling of the #menu. If we were to give the links a relative position 'on hover' instead of the #menu then the spans would be absolutely positioned relative to each link.

To do this, remove the position:relative; from the #menu style and place it in the #menu a, #menu a:visited style instead.

#menu { /* position:relative; REMOVED */ padding:0; margin:0; width:0; } #menu a, #menu a:visited { position:relative; /* ADDED */ display:block; width:9em; border:1px solid #808; font-family:arial, verdana, sans-serif; font-size:0.8em; text-align:center; text-decoration:none; background:#808; color:#eee; padding:0.25em; }

‡ Example List Three

We now have a pop-up information box that tracks the menu items. The top of the pop-up box is now in line with the top of each menu item. The exact position can be controlled by changing the top and left values of the 'hover span' style.

Conclusion

From this tutorial you can see how easy it is to style this type of menu. I have given you the basic information which you can modify as you wish to fit in with the look of your page. The styling, as I have said in past articles, is left up to your imagination.

About the Author

Stu's Web site documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with using just CSS—no JavaScript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!]

Original: July 8, 2005