Need help with a dropdown menu

[Seminara]

Hi all

Please have a look at the following file:

http://www.condottiero.com/test/test.html

I'm trying to build a drop down CSS menu which I found on the web (uses a .htc file as well) but I can't get it to perform correctly.

The first child link in the dropdown list does what it's supposed to do - the text color on hover changes even if you only hover over the div area and not the text.

However, the other links below it do not act as hyperlinks if I hover over the div area (only the div background color changes). I 'need' to hover over the link text for it to be recognised as a hyperlink.

Can you see what's wrong with this code - or can you suggest a better alternative which is multiple browser friendly?

Thanks in advance,
Steiner

 

[Vragabond]

Add a width to your div#listmenu a. IE is reluctant to extend the link beyond the text size (considered auto width) even if it is specified as a block, unless you specifically tell it.

 

[Seminara]

Many thanks Vragabond, that was exactly it. I hate to say how long I've spent on fruitless experimentation on a sunny Saturday afternoon.

Thanks again!

 

[Seminara]

Oops - spoke too quickly. Problem solved in IE - but now Firefox is rendering some strange stuff. Child links are narrow while the roll over is the correct width?

http://www.ideasdrama.org/test/test.html

 

[Vragabond]

Of course this happens. Your list element that is nested inside the top level list (div#listmenu ul li ul) is 10em wide. Your links inside that however, are 10em + 12px wide. So they don't fit. Before you hover on them, you cannot see this difference, since they have transparent background but they hang over to begin with. IE copes with that by simply enlarging the containing list, which is actually wrong.

So, change the padding-left and padding-right for the links to em and calculate that em difference in making the list bigger (for instance .5em padding on each side and 11em wide list). You could also look into suckerfish dropdowns and see how they did it.

 

[Seminara]

Thanks Vragabond - I've made changes which seem to be good enough for the present. I've had to add non breaking spaces before the links as anything else I tried in the CSS seemed to break things in either IE or Firefox. It'll do.

Thanks again.

 

[Seminara]

Edit: I've got - finally. No need for spaces!

http://www.ideasdrama.org/test/test.html