Home/ Questions/Q 6384829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:49:26+00:00

I have created a dropdown menu using CSS and JavaScript and I’m having an

  • 0

I have created a dropdown menu using CSS and JavaScript and I’m having an issue making the sub-menus appear correctly on IE7. When you hover on an anchor tag the background changes to blue. The problem is that in IE7 the background only changes for the length of the text rather than filling the width of the ul. So, if you have one item that has a long name, the rest display incorrectly as shown by the picture below.

IE7 issue

You can see the problem on jsfiddle here. Just make sure you open it in IE7 or use IE9 in compatibility mode.

I have tried a bunch of things like setting the width to 100% and the display to block but haven’t been able to get it to work. Has anyone solved this problem?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, let’s see what do you have:

    <li><a href="#">Content</a></li>

    so you can see that the problem is that the hover is being applied to the <a> and because it’s not wide enough it does not work correctly.

    Why don’t you hover the <li> instead then?

    changing from

    #mainmenu li a:hover { background: #008de2; }

    to

    #mainmenu li:hover { background: #008de2; }

    P.S. I’m using IE9, so I can’t test it properly :-/

    • 0