Стили CSS нацелены должным образом в FF и IE, но не в Chrome

0

Я стараюсь, чтобы моя раскрывающаяся навигация отображалась правильно. Он работает в FF и более новых версиях IE, но не в Chrome. Я думаю, что это может быть связано с тем, что мои родительские элементы списка имеют уникальный идентификатор, а селектор, который я использую в своем CSS, по какой-то причине не нацелен на дочернюю ul под родительским ликом. Может ли кто-нибудь взглянуть на мой код для Chrome и посмотреть, не обнаружены ли какие-либо проблемы? Спасибо.

CSS:

#nav_1348933 li#about:hover > ul{
  position:absolute;
  top:6.9em;
  left:0;
  z-index: 100;
  margin:0;
  padding-bottom:1em;   
}

#nav_1348933 li#admissions:hover > ul{
  position:absolute;
  right: 7em;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#academics:hover > ul{
  position:absolute;
  right: 0.25em;
  width: 480px;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#financial-aid:hover > ul{
  position:absolute;
  right: 15.75em;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#resources:hover > ul{
  position:absolute;
  right: 8.25em;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#donate:hover > ul{
  position:absolute;
  right:0;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 ul{
  position:relative;
  display:none;
  margin:0;
  width:31em;   
  list-style:none;
  background: url(/_images/Layout/hover-tab-body.png) repeat-y;
  z-index: 100;
  padding:0.5em 0.5em 0 0.5em;  
}

Ссылка на сайт:

http://lltc.designangler.com

  • 0
    @AdamBotley Я пытался как убрать "li" перед идентификаторами, так и поставить пробел между ними. Удаление «li» ничего не сделало, а добавление пробела вызвало еще более странные проблемы.
  • 0
    Каскадные алгоритмы псевдокласса работают в chrome: mdn.mozillademos.org/files/3700/css_dropdown_menu.html
Теги:
google-chrome
drop-down-menu

2 ответа

1
Лучший ответ

Что очень поможет в создании вашего меню, делает LI непосредственно под дисплеем меню: inline-block ;. Таким образом, элементы меню имеют фактические размеры, к которым могут быть помещены дочерние элементы ul.

#nav_1348933 > li {
    display: inline-block;
}
Поделиться
  • 0
    Вы, сэр, мой новый лучший друг. =) Большое спасибо. Это добилось цели. С этим боролись как минимум 2 дня.
0

Обновите правило #nav_1348933 li:hover > ul на следующее:

#nav_1348933 li:hover > ul{
  display:block;
  z-index: 100;
  position: absolute;
  top: 42px;
  left: 0;
}

Кроме того, измените порядок суб UL на основную ссылку.

Пример:

<li id="about">
  <ul id="navsub_1348933_1008341">
  //SUBMENU ITEMS HERE
  </ul>
  <a href="/about/about.htm">About</a>
</li>
Поделиться
  • 0
    К сожалению, я не могу изменить порядок навигации таким образом. Меню создается динамически. Причина, по которой я выбрал выбор на основе идентификатора для каждого меню, заключается в том, что подменю являются широкими, а некоторые должны быть расположены вправо, в противном случае меню будет обрезано с правой стороны экрана на родительской панели навигации с правой стороны. страницы. Вот почему я не могу использовать левое позиционирование в меню.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню