Image based Drop downs - with rollovers

Sounds like this might cover what you're after.

Thank you tyssen, The working example looks good and I'll set on recoding it all for a proper menu .

One small question though, its related to targeting:

.nav { list-style: none; } .nav li { float: left; padding-bottom: 10px; } .nav li, .nav li em { width: 147px; height: 27px; } Now, the html its referring to is:

• Link 1

• Submenu 1.1


• Submenu 1.2


• Submenu 1.3

About Us

• Submenu 2.1


• Submenu 2.2


• Submenu 2.3

*edit* looks like it literally takes the code!
There is a class, and then inside the class is a < . em . > tag. (i put dots in the middle because it made the post go italic!)

Notice how there is a < . em . > tag for each item in the list.

Currently with
.nav li, .nav li em { width: 147px; height: 27px; }
Its setting every top list item to have a width of 147px, and he suggests to target each one individually to put in your own widths.
How can I do that?

I've tried:
.nav li home em {width:190px; height: 27px;}
To test it, but it doesn't appear to work that way... any thoughts about targeting it correctly?

It should be .nav li.home em { .... } or if you used IDs instead, .nav li#home em.

thanks for the tip re: placing code in a readable form.

I just clicked on that the original tutorial was from your site - thanks for writing it, its excellent!!

The test I've done is here:

http://cressaid.brettjamesonline.com/albins/navbarR2.html

I've tried your method of targeting, and it worked in dreamweaver! when I preview in firefox at least though, the images are collapsed.

Heres a screenshot with the code I tried:

You've got to apply the width to the em and to the container, so:

.nav li.home, .nav li.home em {width: 76px; height: 25px; } .nav li.aboutus, .nav li.aboutus em {width: 88px; height: 25px; } nav li.link3, .nav li.link3 em {width: 128px; height: 25px; }

Ah, I see. Now I understand the reason you had the , in your original tute.

Tyssons code works!:
http://cressaid.brettjamesonline.com/albins/navbarR3.html
Appears to work brilliant in firefox.

However, I think a sideeffect is that I've broken all Internet explorer support I'll look into it to see I'm missing anything.

Well, I'm stumped. I can't seem to get around this problem for the moment.

I have an idea what might be wrong though - ty's example page works in IE6:
http://www.tyssendesign.com.au/examples/IR-navbar.html

But if I save it, and update the css to point to the right image, no dice. Maybe I'm missing an external file somehow when I save it, but it looks Like i've got a carbon copy...

Such a powerful navbar though! can't wait to fully learn this method.

It seems that IE6 needs the width specified on .nav li, even if you override later with different widths for the different list items:

.nav li, .nav li em {width: 128px; height: 25px; } li.home, li.home em {width: 76px; } li.aboutus, li.aboutus em {width: 88px; } li.link3, li.link3 em {width: 128px; }

You've also left off:

body { margin: 1em; font: 83%/140% Verdana,Arial,Helvetica,sans-serif; behavior: url(hover.htc); }

You can either use the javascript found in the original Suckerfish article or you need to use the hover.htc which you can get from: http://www.xs4all.nl/~peterned/csshover.html

It seems that IE6 needs the width specified on .nav li, Oh no Does that mean I won't be able to use a variable width method for IE then?

*edit*
I added the body {} code and the hover htc you mentioned, worked a charm then.

http://cressaid.brettjamesonline.com/albins/navbarR3bare.html appears to half work now. Custom widths and all. I'm most impressed that the rollovers work!!

The drop down is only half functional though - still looking into that part

*edit2*
Updated the link above to have the bare amount of li in the html to try and isolate whats wrong.
Picture shows that dropdowns do work, however it looks like a set isn't hiding somehow..

Sorry for double posting, but so far I've got it to work, woohoo! *jumps*
cressaid.brettjamesonline.com/albins/my-navbar.html
behaves the same in ie and ff.

I'll go through the code and see if I need to strip anything out, but oh. my. god. You have no idea how much of a relief it is to get something as awesome as this working.

I've realised what was going wrong with the widths before: .nav li refers to both the top level list items and the submenu list items. The submenu list items need a width to stop them going crazy in IE6, so you could probably do away with the width on .nav li and instead add a width to .nav li li.

You are right, and I was working on that when you posted actually.
You can target a specific dropdown in the list too, for example:
.nav li.Products li {width:267px;}

At some point I think I broke the code while working on it, but it works completely in firefox now, heres a work in progress page:

http://cressaid.brettjamesonline.com/albins/contactusWORKING.html
*edit* I got it working again!
Dropdowns appear to work in IE, however the navigation bar expands itself from 24px to 34px! It does this in Firefox too, but appears fine in Safari. Weird!

Hi guys, my drop down menu similar of what you guys talking about.. but i have a problem because opcaity not valid css, ang i want to get rid the grey bottom line.. can you help me? i already post a new topic, with CSS Drop down problem subject. http://www.iczalazar.com, thanks!

You should have made a new topic for it then..

Explain it better in a new thing. Basicly, the grey area is too tall, without looking into it further. Maybe instead of the grey border, you could use a png and transperancy hacks... but if it doesn't work in even firefox, somethings wrong i guess.

Is anyone able to pin point why the code above with tyssens style dropdowns pads out extra space in Firefox and internet explorer? it works fine in Safari, talk about crazy

*edit* FOUND IT!!

.nav li { float: left; padding-bottom: 0px; }
^---- the padding-bottom was 10px in the original, fixed.

Wow, working code, im so happy.

Your code rocks tyssen

Sir, can you give me the working sample link of you drop down..

thanks!

Sure!
http://cressaid.brettjamesonline.com/albins/contactus.html

Transperant menus are thanks to a iepngfix script.

Have a pick at it and see if you can find any other bugs, but as it is you can:

Set the width of each drop down
Set the width of each button

It is a tad complex to set the first buttons up, but I wouldn't really do it any other way - its very customizable.

I like you drop down menu sir.. can use it?

if not, can you help me of myu drop down can give me the exact code?

thanks!

it would be a lot better if you learnt how to do it yourself.... I recommend you follow through tyssons original tute, as if you have trouble you can go back a step and trouble shoot it.

If you try to copy this one verbatim I can guarrantee you'll have bugs of some sort