Home/ Questions/Q 6073203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T10:14:43+00:00

I know that this has been asked a million times before, but nothing that

  • 0

I know that this has been asked a million times before, but nothing that I have tried has solved the problem. I’m working on a nice looking <select> type thing. I’m basing it off of common CSS drop down navigation menus (using nested <ul>s and <li>s, just with a few tweaks. One of the tweaks is that I need it to display inline (without floating it because it goes past any other elements in the same line as it, and I don’t want to float everything else around it). I’ve got it working well in the browsers besides ie 7 (and probably anything lower, but I don’t need anything lower than ie7). Here is the code: http://jsfiddle.net/ralokz/hjDVS/2/

If you look at that in any non-ie7 browser, it looks like how I want it to:

good menu

But if you look at it in ie7, it looks like this:

bad menu

One site that I saw come up a lot for the inline-block fix is this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/. That worked for ie8, but unfortunately ie7 still doesn’t look right.

Is there any other way to fix inline-block for ie7? Or, is there a CSS alternative to make sure the the second level <li>s are always vertically aligned with the the first level <li>? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add:
    position:relative; to div.dropdown ul li, get rid of the margins on div.dropdown ul li ul and set it’s top:25px, left:-1px;, width:100%; finally, set div.dropdown ul li ul li to margin:0; delete the left-right padding, and set width:100% …

    I might have missed something, but here’s a working example: http://jsfiddle.net/hjDVS/7/

    I think your real problem was the absolutely positioned ul

    • 0