I discovered two of my most often used CSS techniques at the same place - Petr Staníček’s Wellstyled.com (Staropramen, Budvar, Pilsner Urquell, great CSS techniques - gotta love the Czechs 
).
And those techniques are an image replacement (IR) technique that I later found out was actually called the Gilder Levin method and the use of a single image for creating CSS rollovers without the need for preloading images.
What was missing from the two tutorials, however, was an example that showed how the two could be combined. Something else that I couldn’t find a tutorial for when I first went looking at how to do it was a way to combine the previous two examples when making a navigation bar. In other words, using a single image for both normal and hover states for all links in an image-replaced navigation bar. And then adding to that the added accessibility of incorporating the Gilder Levin IR technique.
I still haven’t come across a tutorial that combines all that, so I thought I’d do one myself to help out anyone who might be looking to do the same thing.
I’m also going to provide an example of how to incorporate all of that and add another popular CSS technique to the mix as well - Sons of Suckerfish Dropdowns.
First of all, it might help to look at the example to give you an idea of what I’m talking about. The image that we’re going to be using to create the navigation bar (horizontal in our case, but the same techniques could be applied to a vertical example) is below:
The HTML
The HTML for this is fairly simple:
<ul class="nav IR">
<li class="link1">
<a href="#"><em></em>Link 1</a>
</li>
<li class="link2">
<a href="#"><em></em>Link 2</a>
</li>
<li class="link3">
<a href="#"><em></em>Link 3</a>
</li>
</ul>
Without any styling, it gives us this:
The class="nav IR" is because we’re attaching two classes to the list: one for styles specific to the navigation bar we’re creating and the second with general image replacement styles that can be used elsewhere (either on the same page or across a site).
The classes for each of the links are so that we can style each link with its individual image. I’d normally use IDs for this sort of list, but as the example shows two variations of the same list, I’ve used classes instead. (IDs can only be used once per page. If you want to reuse styles, you need to use classes.)
The CSS
So, let’s look at the CSS:
ul.IR li {
position: relative;
/ *overflow: hidden;
commented out for this example */
font-size: 0.9em;
}
.IR em {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
}
/* For IE5.x mac only */
* html>body .IR {
position: static;
/ *overflow: visible;
commented out for this example */
font-size: 10px;
}
* html>body .IR em { position: static; }
The position: relative on ul.IR li is to establish a new positioning context for the elements contained within. In this case, it’s the em which we’re going to place at the top corner of each list element with position: absolute so that it in fact covers up the text underneath. We need to set the em to display: block because it’s an inline element and won’t take dimensions in its default state.
The IR technique I’m using is actually an updated version of the one that I first discovered on Wellstyled.com and irons out a few bugs that IE5/Mac had with the original. The updated method is called the Gilder Levin Ryznar Jacoubsen IR method. I’ve removed a couple of styles relating to overflow: hidden for this example because it will prevent our Suckerfish dropdowns showing in the second example. The overflow: hidden is to prevent the text peeping underneath the images when you resize the text and it can be controlled fairly well by setting an appropriate font-size instead.
The * html>body styles only affect IE5/Mac and the explanation of why they’re necessary is given in full at the link above.
So that sets up our IR styles, now we can start styling the list itself.
.nav { list-style: none; }
.nav li { float: left; padding-bottom: 10px; }
.nav li, .nav li em { width: 147px; height: 27px; }
First, we remove the bullets from the list, then we float the list items to the left so that they are all on the same horizontal plane. We then give the same dimensions to both the list items and the ems that will hold the images. In this case, the height is a little over half the height of our actual image because we only want the top half to appear in the normal state (the rollover state remains hidden below). The actual width of the whole image is 441 pixels, but we only want a third of that to appear within each link. (All my links are the same width because the word is nearly the same, but for real-life situations with words of different lengths, you’d probably need to give each list item and its associated em a different width.) A little bit of bottom padding may also be required to give the list item area enough depth to ensure that the submenus don’t disappear too quickly when trying to roll over them.
.link1 em, .link2 em, .link3 em {
background: url(links.gif) no-repeat;
cursor: pointer;
}
Then we apply the background-image to each of the ems. We need to apply the background-image to each individually because we’re going to be manipulating the background-position of the image for each one (see below).
The cursor: pointer; is needed for IE which won’t show the normal ‘hand’ cursor when hovering over the links with this IR method. (For IE5+ you need to use cursor: hand; which, unfortunately, doesn’t validate, so you may want to move it to an IE5-only stylesheet accessed by conditional comments.)
Now, we’re going to position the background image in each list item.
.link1 em { left: 0; }
.link1 em {
background-position: 0 0;
}
.link1:hover em {
background-position: 0 -27px;
}
.link2 { left: 17px; }
.link2 em {
background-position: -152px 0;
}
.link2:hover em {
background-position: -152px -27px;
}
.link3 { left: 46px; }
.link3 em {
background-position: -314px 0;
}
.link3:hover em {
background-position: -314px -27px;
}
For the first item, we want it and the background image to be at the 0 position both horizontally and vertically. The li:hover moves the background image vertically, moving the normal state out of view and bringing the rollover state on screen.
IE doesn’t accept :hover on any elements other than pseudo elements. To get it to work for other elements, we need something like the whatever:hover and attach it to the body like so:
body { behavior: url(hover.htc); }
For the second and third list item, we move the position of the list item horizontally and then use a negative horizontal position to bring the right part of the image into view. A good way of getting the positions right is to place the actual image temporarily on your page while you’re getting the layout right so that you can line up your menu with the image.
And what we end up with is Example 1.
Adding the dropdown
Now, we’re going to add the Suckerfish dropdown. I won’t go into the exact workings of it here, because it’s been done more than adequately at HTML Dog. I have removed a lot of the styles in the examples given there because they weren’t necessary for the look I was trying to achieve. I’ve also dispensed with the javascript that they’re using because the whatever:hover does the same thing in my example.
First we need to amend the HTLM to include the dropdown menus:
<ul class="nav IR">
<li class="link1">
<a href="#"><em></em>Link 1</a>
<ul>
<li><a href="#">Submenu 1.1</a></li>
<li><a href="#">Submenu 1.2</a></li>
<li><a href="#">Submenu 1.3</a></li>
</ul>
</li>
<li class="link2">
<a href="#"><em></em>Link 2</a>
<ul>
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
<li><a href="#">Submenu 2.3</a></li>
</ul>
</li>
<li class="link3">
<a href="#"><em></em>Link 3</a>
<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
<li><a href="#">Submenu 3.3</a></li>
</ul>
</li>
</ul>
And the additional CSS:
.nav a { display: block; }
/* The Holly Hack */
* html .nav a { height: 1%; }
.nav li ul {
position: absolute;
z-index: 10; /* show the
dropdowns above the images */
top: 28px; /* position the dropdowns a set distance from the top of the image */
left: -999em;
list-style: none;
border: 1px solid #FFCC00;
}
.nav li:hover ul { left: auto; }
We set all the anchor tags to display: block; so that they’re all the same width. We use the Holly Hack to correct a hasLayout problem with IE6 which led to problems with accessing the dropdown links.
We have already set the positioning context for the image replaced list items, so the descendant unordered lists - the dropdowns - are placed absolutely relative to their parents. The left: -999em; places them off-screen in their normal state with the li:hover bringing them back into view.
.nav li li {
height: auto;
padding-bottom: 0; /* reset the height set on the IR list items */
font-size: 110%;
border-bottom: 1px solid #FFCC00;
}
We need to reset the height and padding on the descendant list items because they were set for the image replaced list items. The rest of our styles are simply to get the dropdown list items to look the way we want.
.nav li ul a {
padding: 0.25em;
color: #FF6600;
background: #FFFFCC;
}
.nav li ul a:hover {
color: #CC0000;
background: #FFCC00;
}
And that’s it. As mentioned previously, in real-world situations there’s probably quite a few things that would change, particularly to do with the width of the image replaced list items and maybe their descendant dropdowns too.
(The original HTMLDog Suckerfish example and this one fail in IE5/Mac. If you’re concerned to get it right in that browser too, you’ll need to modify the javascript involved.)
Your example doesn’t work in IE.
Hi John,
It seems that in the process of moving servers, the hover.htc which IE requires for triggering the rollover on non-pseudo elements went missing. The file’s back in place now so the example should work in IE. Thanks for pointing it out ;)
Hi John,
Thanks for the great tutorial! It’s the only one I found using image rollovers without javascript, and for the most part, it works well. I modified it to have the dropdown items include image rollovers. However, I’m having some minor cross-browser trouble with the submenus — in IE and Opera, they display correctly, but in Firefox and Netscape, they are about 40 px to the right of where they should be. I’m sure I’m missing something obvious here, but I’d appreciate any help I can get.
The menu: http://nightstand.org/hcec/roll/
Thanks again!
PS: I forgot to mention that some bits of code from your tutorial are missing, but adding them back in seemed to have no effect on my problem.
Hi Brandy,
Glad you liked the tutorial. For your example, it’s the default margins and padding on the
ulandliwhich are causing the problem. Setting both tomargin: 0; padding: 0;should resolve it.A couple of other things you could do as well would be to lose the submenu class from your anchors; you don’t really need it as you can target those links through the CSS with
li li a.You’re probably also better not using
position: absoluteon those links to position the text but rather using padding.Hi John, I’m new to CSS so maybe this is a stupid question but, in your example page, the submenus sometimes disappear in IE and Firefox before you can select them. Is there a way to fix this?
Hi Kevin,
A bit of bottom padding on the list items (which is then reset for the submenu list items) seems to alleviate the problem. I’ve amended the article to show what I mean.
Hi
thanks for the great article. The horizontal menu example doesn’t work in Opera7. It shows the menu without images( which would be fine for me, if i can hide the css from opera7 only), and shows one of the image ‘item3’ on top of the page. Do you know a fix or alternatively a way to hide it from Opera7?
Hi again
I figured out the Opera7 issue now: it is the absolute positioning of the ‘em’ elements. They got absolutely positioned to the top left corner of the browser instead of the parent element.If you remove the top, left specifications, it works.
.IR em {
display: block;
position: absolute;
z-index: 1; }
Hi Zeynap,
That’s an interesting problem you’ve highlighted.
I will admit I wasn’t that concerned with compatibility with Opera 7 when I wrote the article and believe there’s probably even less reason to be so now (my site stats show just one visit from a user with Opera 7.5 this year compared to 310 for all Opera users).
Your solution does seem to fix the image replacement problem in Opera 7 but not the dropdown menu as well.
Loved the tutorial. After trying a variety of techniques, coming across yours is a god send. One question though:
you made a target for all the list items so you have essentially fixed width buttons. You realised this and recommended to target each EM. How can you do that? The “global” code you used is:
.nav li, .nav li em { width: 147px; height: 27px; }I ask because i’ve made a menu with buttons that are of different sizes :/
Thanks for your time!
Hi Brett,
You’d give each list item an ID or class and then apply different widths to those in your stylesheet.
This has been invaluable to someone who is NOT a programmer in working on my church’s new website. Still working on it, so not live yet to view. One change I would really like to make is to have the drop-downs be wider than the rollover buttons. How would I do that?
Hi Chris,
You’d give
.nav li lia different width from.nav li.I’ve been working with this code for some time now until I got it to work with varying-sized drop boxes for level one and then added another level (off the side of level 1). It works in IE 7 completely and in FF2.0.0.11 and Opera 9 up to the last dropdown, which won’t show no matter what I do. Although the Left auto works the first time, it doesn’t display the second level in FF or Opera.
I have never worked with CSS so I’m using bits from the original Suckerfish 2-level menu.
I have no website to display this but here is a portion of what I’ve added:
#dropmenu_link2 {
width: 128px;
overflow: visible;
background-color: #6f0100;}
#arrow {
background-image: url(images/button_tests/menu_arrow.gif);
background-repeat: no-repeat;
background-position: 117px center;
}
.nav li ul a:hover {
color: #e5bb36;
overflow: hidden;
background-color: #000000;
}
.nav li:hover ul ul {
left: -999em;
width: 62px;
margin-left: 128px;
background-color: #6f0100;
overflow: hidden;
margin-top: -24px;
}
.nav li li:hover ul {
overflow: hidden;
left: auto;
}
Plus the list items.
What might FF and Opera require that IE doesn’t? Thanks for any help.
Thanks for the tutorial! I’ve used this several times, and now I understand image replacement / css drop down menus well enough to pretty much do it on my own. One thing though — your technique isn’t really “suckerfish”! It’s IR + whatever:hover. Suckerfish seems to be a little more finicky in implementation, but if this type of menu comes up in a project I’ll try to tackle it with suckerfish and I’ll post the results. You can go to the bottom of the suckerfish page to see the advantages of Suckerfish over whatever:hover.
Hi Kevin,
That’s interesting. I’ve never actually read that bit at the bottom of the page where they mention the advantages of their js over the whatever:hover.
However, the only advantage on their list that I think is important is that they say the whatever:hover doesn’t work in IE5. They should really revisit their article, because the whatever:hover does work in IE5 and if you look at my example page, I actually state that the menu was tested in IE5.01 and IE5.5 succesfully.
Their other argument that it invalidates the CSS doesn’t really concern me - I’m not that bothered about sending invalid CSS to browsers with incorrect implementations of so much CSS anyway. (And if you want to get really pedantic about it, the CSS validator won’t actually invalidate a page containing stylesheets served up with conditional comments anyway.)
I think it is great that you created this tutorial - this is a real gem when searching for a CSS drop down menu that utilizes a rollover image.
I have run into one problem and I didn’t see any clarification in the tutorial. How do you determine the left parameter for each of the link classes:
.link1 { left: 0px; }
.link2 { left: 17px; }
.link3 { left: 46px; }
I have a menu that has 8 rollovers. I kept adjusting the left until everything aligned properly (on Firefox using a Mac), but when I checked the page in Firefox and IE on a PC the alignment is off. Is there a way to standardize this?
Hi Shane,
I’m not aware that there should be any differences between Windows and Mac browsers. When I did the example originally I checked it out in both and it was OK.
I’d need to see a link to your page to determine what’s going wrong.
Thanks John … I tinkered with the CSS some more and figured out that I was able to solidify the positioning of the images by change this:
ul.IR li {
position: relative;
To this:
ul.IR li {
position: absolute;
I will work on finalizing the menu tomorrow … do you foresee any problems with switching that item to absolute?
If you would still like to look at the menu, I can pull a copy out of production and place it on a publically viewable page.
Thanks again!
Using absolute instead of relative should work fine. No need to post a link if it works out OK for you.
The banner I want to use this technique for has content to both the left and right of the navigation. The whole thing is about 940px wide, but the navigation is only in the middle. I’m having a very difficult time adjusting the code to display the non-link parts of the image. Any help?
Matthew, would need to see your code or a link to the page.
http://img217.imageshack.us/my.php?image=headerbuttonsxp2.jpg
I hosted the header image at the link above. I don’t think there’s a point in posting my code because I’ve just been fooling around with the code posted on this site.
Now, would it be better to simply use the code on the site to build the menu and then embed that menu between the left and right portions of the header instead of trying to make the whole image part of the menu? (does that make sense?)
Make the header image and the image for the navigation two separate images. The one for the navigation will have the on and off states in the same image; the one for the rest of the header doesn’t need to be repeated. Then just position the nav so that the two bg-images match up.
Hi,
First off, thank you for posting this tutorial. It seems to be just what I was looking for as my JS hover menu with CSS dropdowns was eating too much bandwidth and loading slowly in IE. I apologize for commenting on an older article but had a (most likely stupid) issue I couldn’t get past…. I can’t seem to get this menu to work with an external stylesheet. CSS is not my thing, admittedly, but what seems like it should work, won’t. I stole the code off your example page, pruned out the extras and posted it as is and it works fine but when I put the CSS into an eternal style sheet, no luck. Am I overlooking something simple or am I never going to get this to work?
Hi Tab, I’d need to see your page to be able to comment.
Hi John,
Ok, cool… It works here - http://www.vortexdesign.com/testmenu2.htm (This is the one I left pretty much intact)
But it doesn’t work here - http://www.vortexdesign.com/testmenu.htm m (the one with the external stylesheet)
and this is all I took out of the style code-
/**/
Like, I said, it’s probably something stupid, but i’d appreciate if you could point out what that stupidity might be
Thanks!
P.S. Just FYI, here’s the old menu i’m wanting to replace - http://www.vortexdesign.com/photo_restoration_services.shtml (Site’s not done yet, so forgive the crappiness…)
It’s because the one with the external stylesheet is missing the * from in front of { margin: 0; padding: 0 } on the first line which sets the padding and margins of all elements to 0.
You also need a doctype on your page to ensure cross-browser compatibility.
Yup, the combo did the trick. Man, if I could just do the creative stuff all day, I would be a happy camper. But no, gotta muck about in code all day instead
Anyway, thanks a bunch!! Now to customize it……
John,
I ran into a situation where the text in the li tag is appearing with the background image (http://associationdatabase.com/page_template/show/706). I think its due to using transparent pngs for the background. Id that’s the case, any suggestion on working around that, or will this technique not work with transparent images?
Hi Chris, no the technique doesn’t work with transparent images.
Hi! I’m using your method for creating a drop down menu and I’m running into an issue when I try to add a margin to a couple of list items. I set a class to the li tag then specified the CSS to incorporate a margin-bottom. The menu looks great in Safari and Firefox but IE is turning the margin into empty space which causes the menu to disappear when the curser mouses over the blank space. This class technique works fine when applied to the straight SonofSuckerfish Menu. Any help would be greatly appreciated as I would prefer to use your code instead. Here’s a link (Class applied to first menu item only): http://hendrita.googlepages.com/nav-test.php
Hi Islay,
Making
.nav li.last { border-bottom: 5px solid #FFF }instead of
margin-bottom: 5pxseems to work in IE, FF & Sarari.Im very much new to CSS…. so, is there a way to remove the dropdown menu for IE users?
I want to keep the rollover effect though…
Thanks for the help.
@Omar: why would you want to remove the dropdown for IE users?
Thanks for the article !
you saved me a lot of time and not to mention headache. Saw your approach customized it to fit my needs and bang i’am in business..
thanks
john Bandaru
i have looked at the tute and gone thru it and it just does not work on IE at all. even that link referring to nightstand.org does not work in IE at all. the sub menu does not show whatsoever. i looked at the htc file. added it to my site and still nothing happens. its all fine in FF, no probs but in IE it doesnt work at all. i am using FFv3, the IE plug in for FFv3 and also IE7 and it does not work in IE at all. can you please help
Danny, your problem in IE7 is a classic example of why you should always validate your code – HTML & CSS. If you had, it would’ve told you that you have an error with one of your comments. This:
ul.IR li {position: relative;
/ *overflow: hidden;
commented out for this example */
font-size: 0.9em;
}
should be:
ul.IR li {position: relative;
/* overflow: hidden;
commented out for this example */
font-size: 0.9em;
}
(i.e. /* not / * ).
As for the problem in IE6, I’m not sure exactly, but you’ve copied something wrong or changed something incorrectly. When I paste the CSS from my example into your page (leaving only the parts from yours that relate to the styling of the top level links), the dropdown works fine, so if you do the same as I’ve done and change and test one piece at a time, you should get there in the end.
schoolboy error i think there on that one. totally hold my hands up. another thing i saw is that in IE the menu header displayes fine. when i plase my mouse over any header i see the list. once i try to select (or move my mouse over) the 2nd or 3rd item the menu disappears. its ok when i pass over the 1st menu item. this only happens in IE
Hi Danny, this (at line 116):
.nav li {
float:left;
padding-bottom:0;
}
should be this:
.nav li {
float:left;
padding-bottom:10px;
}
as it was in the original example. ;)
This tutorial was amazing, and I’ve gotta give you huge props for this effort. I’ve been using your technique, but have hit a snag with IE6. I’ve modified your menu for my site, and it works in IE7 and Opera, and sort of works in Firefox(small gap on right side of menu). In IE6 though, the menu stacks improperly, and I’m pretty sure the problem is where I define the width in the different list items of the nav li, nav li em…
.nav li, .nav li em { width: 147px; height: 27px; }Going back and starting over again from your demo, this is where I start getting problems. Anyways, hopefully this makes sense and you can point me in the right direction, if my comment’s not too late…
Hi Jeb,
It shouldn’t be (for example):
.aboutus li, .aboutus embut rather:
.aboutus a, .aboutus emYou’ll then need to adjust all the left values for all the top level list items (actually it looks like you probably don’t need to specify a left value for any of them at all), and then the widths and the heights of all the submenu list items.
Wow, thanks John. That fixed my menu spacing issue in Firefox and the stacking/floats problem in IE6. I have a few kinks to work out with my margin/padding on the sublists, but now my dropdowns in IE6 aren’t working at all anymore. Am I missing something when I change the tag from “aboutus.li” to aboutus.a”?
Thanks again for the assistance…
Actually never mind about the lack of dropdowns in IE6. My hover.htc was linked improperly. Ugh, stupid.
The menus work, however, when I dump the
.nav li, .nav li emtags from your original CSS and change to the.aboutus a, .aboutus emtags in my page, the menus go from vertical to horizontal in IE 6. I’m trying to figure out which rule needs to have the anchor tag added so that the menus will display properly…You need to add
float: noneto.nav li li.You sir, are my hero. Many many thanks…
No problem. :)
Hey John, you’ve been awesome, my site’s looking great. I know you’ve helped me out twice, but I’m hoping you can throw me one more bone.
The page is functional and working, although I have one tiny cosmetic issue. When the dropdowns are activated on the hover state, they hang over too far on the right. I’m pretty sure the borders and the padding on .nav li ul a are what’s pushing it over. But as in your example, it’d be great if the dropdowns aligned perfectly with the width of my replacement images, instead of being over too far right. Again, any help you can throw my way is hugely appreciated.
Here’s the site:
http://www.lakeviewchurch.com/new/index-4.0.html
Thanks again…
Each top level anchor has been given a width; that width is also inherited by the submenu anchors, but as you say, the padding and borders on those make them wider. So you need to give a different width to the submenu anchors, e.g.
.nav li ul a { width: XX }John you’re awesome. I never thought about the sub-anchors once the parents were set. Your genius knows no bounds…
One last thing(I swear), as I’ve been wrapping this up, I’ve noticed the dropdowns disappear on the mouseover when a clickable link or Flash object is below it, just in IE 6/7 and Opera. It’s erratic and acts differently each time, but it seems to happen when you move from one item on the list to the next(especially over the Flash object). It’s not a big deal, but it could get worrisome and annoying for our IE users. Again, it’s probably not a huge fix, but my kung-fu is weak…
Thanks again for the help… http://www.lakeviewchurch.com/new/index-4.5.html
You could try adding wmode=”transparent” to your Flash object or you might need to look into using a javascript-enhanced version of Suckerfish that makes the submenus more ‘sticky’.
Sweet, thanks for the redirect John. Couldn’t have done it without your help…
Hi John,
This is looking like a great solution, but I have two problems that I can’t seem to fix, and I’m hoping you can help.
1. For IE 6, when I link the hover.htc file relatively from an external style sheet it doesn’t work properly. It seems to be linking from the path of the actual .aspx page, not from the .css page. Do I have to do an absolute link?
2. For some reason, I can’t click on the top level links (in FF and IE). They roll over like they’re supposed to, but don’t go anywhere. Drop down items work fine. Any ideas?
Here’s my CSS:
/* — — — — — — — — — — — — — — — — — — — — Top Nav */
* { margin: 0; padding: 0; }
.ClearNav:after {
content: “.”;
display: block;
height: 0;
clear: both;
}
.ClearNav { display: inline-block; }
/* Hides from IE-mac \*/
* html .ClearNav { height: 1%; }
.ClearNav { display: block; }
/* End hide from IE-mac */
/* image replacement general properties */
ul.IR li {
position: relative;
/* The original method recommends setting this so that the text doesn’t peak out if you resize the text.
But overflow also includes our dropdown list, so we need the overflow to be visible. */
/* overflow: hidden; */
}
.IR em {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
}
/* For IE5.x mac only */
* html>body .IR {
position: static;
overflow: visible;
font-size: 10px;
}
* html>body .IR em { position: static; }
/* image replacement specific properties */
.TopNav {
list-style: none;
float:left;
width:520px;
height:23px;
margin:56px 0 0 20px;
}
.TopNav li.NavAbout, .TopNav li.NavPrograms,
.TopNav li.NavLife, .TopNav li.NavApplying { float: left; list-style: none; padding: 0 0 10px 0; margin: 0 } /* add a little bottom padding to make sure the sub menus don’t disappear before selecting them */
.TopNav li.NavAbout, .TopNav li.NavAbout em { width: 85px; height: 23px; }
.TopNav li.NavPrograms, .TopNav li.NavPrograms em { width: 210px; height: 23px; }
.TopNav li.NavLife, .TopNav li.NavLife em { width: 102px; height: 23px; }
.TopNav li.NavApplying, .TopNav li.NavApplying em { width: 123px; height: 23px; }
* html>body ul.TopNav li em { margin-bottom: -24px; } /* for ie5.x/mac only */
.NavAbout em, .NavPrograms em, .NavLife em, .NavApplying em {
background: url(../../images/topnav.png) no-repeat;
cursor: pointer;
/* IE5 requires cursor: hand; however this is not valid CSS2 */
}
.NavAbout { left: 0; }
.NavAbout em { background-position: 0 0; }
.NavAbout:hover em { background-position: 0 -23px; }
.NavPrograms { left: 0; }
.NavPrograms em { background-position: -85px 0; }
.NavPrograms:hover em { background-position: -85px -23px; }
.NavLife { left: 0; }
.NavLife em { background-position: -295px 0; }
.NavLife:hover em { background-position: -295px -23px; }
.NavApplying { left: 0; }
.NavApplying em { background-position: -397px 0; }
.NavApplying:hover em { background-position: -397px -23px; }
/* suckerfish styles */
.TopNav a { display: block; font-weight: normal; }
* html .TopNav a { height: 1%; }
.TopNav li ul {
position: absolute;
z-index: 10; /* show the dropdowns above the images */
top: 24px; /* position the dropdowns a set distance from the top of the image */
left: -999em;
width:185px;
list-style: none;
background-color:#e6ac3b;
padding-top:10px;
}
.TopNav li:hover ul { left: auto; }
.TopNav li li {
height: auto; /* reset the height and padding set on the IR list items */
padding-bottom: 0;
list-style: none;
}
.TopNav li ul a:link, .TopNav li ul a:visited, .TopNav li ul a:active {
color: #000;
font: 12px “Trebuchet MS” Verdana, Arial, Helvetica, sans-serif;
height:19px;
padding: 0;
text-decoration:none;
}
.TopNav li ul a:hover {
color: #db1c0a;
text-decoration:none;
}
and here’s my HTML:
<a href=”/about/”>About Us>/a>
<a href=”/about/staff.aspx”>Our Staff</a>
<a href=”/about/faq.aspx”>FAQs</a>
<a href=”/programs-tournaments/”>Programs & Tournaments</a>
<a href=”/programs-tournaments/post-graduate.aspx”>Post Graduate</a>
<a href=”/programs-tournaments/competition-scholarships.aspx”>Competition & Scholarships</a>
<a href=”/life/typical-day.aspx”>Life</a>
<a href=”/life/typical-day.aspx”>A Typical Day</a>
<a href=”/life/orange.aspx”>Orange</a>
<a href=”/applying/”>Applying </a>
<a href=”/applying/request-tour.aspx”>Request a Tour</a>
<a href=”/applying/contact.aspx”>Contact Us</a>
<! — TopMenu End — >
Any help would be greatly appreciated! Thanks so much!
Yes, it is relative to the page, and so yes, it is better to use absolute links.
Sorry, I don’t understand what you mean by don’t go anywhere. Can you elaborate?
Thanks for your super quick reply John!
When I click on the top level nav items, they don’t go to the a href link. The image rolls over like it’s supposed to, but nothing happens when I click on the link (and no URL shows up in the bottom status of the browser)… almost like there’s no URL assigned to the link. All the dropdown items work fine though.
I know in your code it works, so I’ve obviously messed it up somehow. I thought maybe you’ve run across this before, or can quickly figure out what I’ve done wrong by looking at my css code. If not, I’ll just start from scratch and try again.
Thanks again, Cindy
Hi Cindy, I’d need to see a link to the page to be able to help.
Hey John - just wanted to let you know I figured it out… my em tags were before my a tag in the html… not after. It’s working great now… except for the absolute linking of the hover.htc behaviour which my dev guy doesn’t like. So, unfortunately I don’t know if I’ll be able to use this solution again… bummer!
Thanks for all your help! Cindy
What’s not to like?
It’s hardly a dealbreaker to not use a technique like this. If he’s that precious about it, you can use another form of javascript instead. All dropdown menus require some form of js to work in IE6 anyway.
Hi John
I’m new at css coding. You mentioned that:
“…for real-life situations with words of different lengths, you’d probably need to give each list item and its associated em a different width.”
Where do I put the “width” here?:
.link1 em{ left: 0; }
.link1 em {
background-position: 0 0;
}
.link1:hover em {
background-position: 0 -44px;
}
Thanks in advance.
That would be:
.link1, .link1 em { width: XXpx }