I'm working on cleaning up the CSS of a site for my client, and I cannot for the life of me figure out why the submenus of my submenus aren't displaying as block. The menu items are set with a min-width of 182px, but any sub-submenu items that are smaller than that min-width end up displaying next to each other instead of stacking properly. Grr. It may not be an issue that can be solved (thanks, IE7), but employing customers want to know!
You'll see the sub-sub-menus that are being naughty when you rollover Tour Selector and then any of the countries below that choice (i.e. Ireland and Italy under Europe, etc.).
I think I might have found the issue. According to IE's developer tools every list item in the dropdown menus has float: left applied to it. That would explain why they are displaying inline and not going full width. To overcome this, you might just have to use a very specific selector and set:
ul#main-nav li { float: none; }
Hope this helps. I'd be interested to know the outcome (I have no way of testing my theory).
If you add !important to that thing you got in your css on line 265 (width:182px\9;) it seems to work, why? I don't know. Sure isn't the best solution to use !important FYI, just saying :P
I'm working on cleaning up the CSS of a site for my client, and I cannot for the life of me figure out why the submenus of my submenus aren't displaying as block. The menu items are set with a min-width of 182px, but any sub-submenu items that are smaller than that min-width end up displaying next to each other instead of stacking properly. Grr. It may not be an issue that can be solved (thanks, IE7), but employing customers want to know!
Here is the URL:
goeducationaltravel.com
You'll see the sub-sub-menus that are being naughty when you rollover Tour Selector and then any of the countries below that choice (i.e. Ireland and Italy under Europe, etc.).
Suggestions are welcome!
I think I might have found the issue. According to IE's developer tools every list item in the dropdown menus has
float: leftapplied to it. That would explain why they are displaying inline and not going full width. To overcome this, you might just have to use a very specific selector and set:Hope this helps. I'd be interested to know the outcome (I have no way of testing my theory).
Well, I gave that a try and messed around some more with floats, and unfortunately that didn't fix anything. Blargh.
If you add !important to that thing you got in your css on line 265 (
width:182px\9;) it seems to work, why? I don't know. Sure isn't the best solution to use !important FYI, just saying :P