Исправление CSS, чтобы элемент правильно отображался в IE и FF

Question

Я пытаюсь решить эту проблему самостоятельно с пятницы, и мне просто не везет. Надеюсь, что со следующими особенностями кто-то здесь может помочь подтолкнуть меня в правильном направлении.

Сайт, о котором идет речь http://www.jewelbyjewel.co.uk

Проблемная область: верхнее меню навигации

Если вы посмотрите на меню в Chrome, вот как выглядит второе меню:

Вот так должно выглядеть меню.

В IE и FF это выглядит так, как выглядит меню:

Теперь я знаю, что могу исправить это, явно указав ширину в следующей таблице стилей: http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css Я мог бы изменить это:

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

на это:

#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;
}

(ширина: 420px \ 9; это взлом IE9).

Хотя это работает, мне интересно, почему мне приходится указывать отдельные ширины, когда в Chrome это работает без проблем, и я не указал максимальную ширину где-либо в CSS. Я не хочу признавать это, но если не использовать взлом, как описано выше, эта проблема меня победила! Я почти уверен, что либо сделал что-то не так, либо упустил что-то тривиальное. В любом случае, я бы хотел иметь возможность докопаться до сути и оставить это позади.

Answer 1

Не уверен, поможет ли это, но ваше поведение по ширине зависит от абсолютного позиционирования <ul class="sub-menu sub-menu-1">.

Есть немного больше по теме: div с неопределенной шириной (абсолютное позиционирование) , так что указание width или min-width - это путь.