1

I have been trying to resolve this issue on my own since Friday and I just don't seem to be having any luck. Hopefully with the following specifics, someone here can help push me in the right direction.

The site in question is http://www.jewelbyjewel.co.uk

The problem area: Top navigation menu

If you look at the menu in chrome, this is how the second menu appears:

enter image description here This is how the menu SHOULD look.

In IE and FF, this is how the menu looks which is incorrect:

enter image description here

Now, I am aware I can fix this by explicitly specifying a width in the following stylesheet: http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css I could change this:

#megaMenu ul li#menu-item-225 {
  position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
    max-width: none !important;
}

to this:

#megaMenu ul li#menu-item-225 {
  position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
    max-width: none !important;
    width:400px;
    width: 420px\9;
}

(width: 420px\9; is an IE9 hack).

While this does work I am wondering why I am having to specify individual widths when in Chrome this works without issues and I am not specified a maximum width anywhere in the CSS. I hate to admit it but barring using the hack as detailed above, this issue has me beat! I'm pretty certain I've either done something wrong or I'm missing something trivial. Either way, I would love to be able to get to the bottom of this and put it behind me.

j08691
  • 204,283
  • 31
  • 260
  • 272
RSharpe
  • 11
  • 1
  • Whow what a mess for such a simple menu. I didn't have time to find a solution though I hope this helps: With basic.css ignored the navigation breaks up but the drop down is vertical, so maybe tweak around basic css. (I believe the annoying width of the drop down is in custom css as you mentioned. Most I could do) – frontsideup Mar 23 '12 at 02:45

1 Answers1

0

Not sure if this helps, but your width behavior is affected by absolute positioning of the <ul class="sub-menu sub-menu-1">.

There is a bit more on the subject: div with unspecified width (absolute positioning), so specifying width or min-width is the way to go.

Community
  • 1
  • 1
Yevgeniy
  • 300
  • 2
  • 7