About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977


Simple CSS Hover Tab

Update: The original edit of this post and demo file didn’t work in IE6/7. See the comments for my quick explanation of the fix (the demo now works in FF2/3, Safari 2/3, Opera 9, and IE6/7).

After throwing together a quick little hover/tab widget for my previous article, I thought I’d share how it was made, in case you find a need for it someday.

Bulletproof lists

The widget in question is just a simple unordered list, with each list item containing an anchor and an image—we want the images in this case because I want them to display in my RSS feed and for anyone who can’t (or chooses not to) view the styled version of this site.

Note: Feel free to reference images in the stylesheet rather than inline if that suits your purposes.

See the widget in use in my previous article, or check out this demo.

The code

First, the markup (with URLs truncated to save trees):

Simple, uncluttered, uncomplicated.

Next, the CSS:

ul#hover-tab-thingy {
  height:498px; }
#hover-tab-thingy li {
  list-style:none; }
#hover-tab-thingy li a {
  padding:9px 21px;
  border-right:1px solid #fff; }
#hover-tab-thingy li a:hover {
  color:#fff; }
li#one a,
li#one a:hover {
  color:#555; }
#hover-tab-thingy li a img {
  border:3px solid #e5e5e5; }
li#one a img,
#hover-tab-thingy li a:hover img {
  margin-left:0; }
li#two a:hover img,
li#three a:hover img {
  border-color:#f60; }

This is all fairly straightforward, so here are the highlights that may help when duplicating this on your own:

  1. The entire idea is that you have tabs that are each associated with content (images in this case) which are made visible when the user hovers over the tab. There are more things you could do with this, but that’s your job, grasshopper.
  2. The tabs are floated; the content elements (img in this case) clear the floats.
  3. The content elements are set to position:absolute, so they can appear in the same location for each tab. To accomplish this, the ul is set to position:relative (in short: an absolutely positioned element will be positioned relative to its nearest positioned ancestor—see Doug Bowman’s great write up for more), and it’s probably a good idea if the dimensions of your ul (the container for your content) have a lot in common with those of your content elements.
  4. IE6 has a problem reverting elements that set display:block on :hover to their original state (e.g. display:none). To counter this, use a negative left margin as the default positioning, and then set margin-left:0; on the hover state, which works in all modern browsers.
  5. The width and height is specific to my example (the dimensions of the images I used), ditto for the padding on the tabs and the top positioning on the img elements (to push them below the tabs). Bend them to your will.


This may be something that you’ll find use for on a regular basis—one of those tiny snippets of reusable “stuff” that you’ll be glad you don’t have to type every time.

This item was posted by Dan Rubin on Tuesday, August 19th, 2008.


You can follow comments on this item via the RSS 2.0 feed.

Comments are closed, but you can trackback from your own site.

15 comments on “Simple CSS Hover Tab”

  1. Posted by Dan Mall on Tuesday, August 19th, 2008.

    I can’t believe you would ruin The Departed like that without warnings of a spoiler.

  2. Posted by Dan Rubin on Tuesday, August 19th, 2008.

    @Dan: I can’t believe I haven’t customized the colors of the code sample formatting plugin I just installed. You can’t tell me a spoiler is worse than that pink…

  3. Posted by Lea on Tuesday, August 19th, 2008.

    The title “The Departed” pretty much said it all.

  4. Posted by Bridget Stewart on Tuesday, August 19th, 2008.

    You mean, everyone dies except Marky Mark.

    Now THAT’S a spoiler.

  5. Posted by Dan Rubin on Tuesday, August 19th, 2008.

    @Lea: :)

    @Bridget: Oooo, raising the bar…

  6. Posted by Nick on Wednesday, August 20th, 2008.

    Nice! Floated anchors do not align correctly in IE6. I did not test IE7, but it looks fine in FF3 so I figure its bound to be close. None the less good job

  7. Posted by lk on Wednesday, August 20th, 2008.

    Broken in IE7

  8. Posted by Dan Rubin on Wednesday, August 20th, 2008.

    @Nick: I threw this together quickly, and didn’t feel like launching VMWare at the time, so thanks for the note – then again, none of us are really surprised at anything not working in IE6 anymore, are we? ;)

    @lk: Thanks so much for your insightful comment.

    I’ll fire up XP and take a look at what needs to be tweaked for at least IE7, and maybe IE6 while I’m at it. Wouldn’t want to leave the high percentages out in the cold :)

  9. Posted by Dan Rubin on Thursday, August 21st, 2008.

    I’ve updated the post and demo with corrected CSS, so everything now works in IE6/7.

    The problem was two-fold: I had neglected to set the list items to float:left;, which IE6/7 both require in order to get the tabs to line up.

    That fixed the positioning in the IE duo, but then a strange thing happened: IE6 wasn’t reverting the img elements to their default invisible state of display:none, so once you hovered over a tab, its image stayed put (meaning if you hovered over all the tabs, the 3rd and top-most image would stay visible permanently). While this is obviously a bug in IE6, I didn’t think it warranted either an IE6 stylesheet or an inline hack, so I found another way. That way was using a negative left margin as the default positioning, and then just setting the margin to zero on hover.

    The new method works in your standard compliment of browsers (see the update at the very top of the post), so go forth and be fruitful.

  10. Posted by lk on Thursday, August 21st, 2008.

    Good job. Didn’t mean to be rude with my terse comment… was just in a hurry I guess.

  11. Posted by Dan Rubin on Friday, August 22nd, 2008.

    @lk: no worries, I just have to poke a little fun at those kinds of comments every so often ;)

    The main point is that *I* was in a hurry when I coded it up, so thanks for pointing out that it needed fixing. It’s much more useful now that it works in the IEs :)

  12. Posted by Chad on Tuesday, March 3rd, 2009.

    This brings about a good point that I am always bitched at about by my clients. IE6 interoperability. I use a Mac, I code in Coda (flame away if you will) and use MAMP for testing. I recently completed a design for a site and had tested it in Safari, FF2 & 3 IE7 and Opera (even thought it’s only about 2%) and the client screamed at me because one of their biggest customers (roots) uses IE6 still. WTF uses IE6 still!? Jesus. Anyways. Long story short, I found a program called IETester that you can download from Softpedia, to do ie5.5 ie6, ie7 and ie8 beta testing all in one. It’s decent but only on windows of course; so fire up VMware or Parallels and test away!

  13. Posted by Kids Wall Art on Saturday, March 7th, 2009.

    Nice “thingy,” and @chad I’ve been looking for a tool that tests in all of the IEs. Thanks!