CSS dropdown menu issue in IE7

HTML & CSS
1

HELP!
I have a css dropdown menu that works perfectly in every browser execpt IE7.

http://www.joomlatemplates.litchfieldmorris.co.uk

If you hover over the TYPOGRAPHY menu option in IE7 it displays the submenu but enlarges the parent item.

How can I fix this?

Thanks

Lee

2

Hi,

In the IE7 stylesheet you have set the dropdown ul to be position:relative and it needs to be position:absolute. You need to remove the IE7 styles completely and use these:


#menu ul li ul {
		position:absolute;
		left:10px;
		top:35px;
		background:url(fake.gif);/* IE7 needs this or it won;t move over the gaps in the menu */
}
#menu ul li{position:relative}
#menu ul li ul li {width:200px}
#menu ul li:hover > ul {display: block;}

However, I would not usually use the display:none method of hiding menus as it is not very accessible. The best way is to move the menu offscreen and then just bring it on screen when hovered.

e.g.


#menu ul li ul{margin-left:-999em}
#menu ul li:hover ul{margin-left:0}

You don’t really need all those rules in the IE7 stylesheet either as you could instead use them for all browsers but that would require a few changes to the exisitng code and I was short of time :slight_smile:

3

Thanks for the help.

I’m interested in your last comment that I do not need all the IE7 css code. WOuld you be kind enough to expandon what you mean.

Thanks again for your help. :slight_smile: :smiley:

Regards

Lee

4

I was just saying that you could use the same method for all browsers and hence the rules could be in the main stylesheet.

However Ie7 needs the fake background image and the width so probably best to leave it where it is for now especially as it seems to be working now.