Блог

Главная - Вопросы по программированию - наведение курсора на меню css, выводящее подменю из выравнивания

наведение курсора на меню css, выводящее подменю из выравнивания

#css #drop-down-menu

#css #выпадающее меню

Вопрос:

У меня проблема, из-за которой меню навигации слева имеет подменю при наведении курсора и не выровнено. 

 DIV#nav-cat UL UL.level2 {
z-index: 8007;
position: absolute;
border-bottom-color: #b0ccdc;
border-right-width:1px;
background-color: #e8f1f6;
border-top-color: #b0ccdc;
width:132px;
display: none;
border-top-width:1px;
border-bottom-width:1px;
border-right-color: #b0ccdc;
border-left-color: #b0ccdc;
border-left-width:1px;
top: -2px;
left: 178px;
}

Первое меню «Электроника» корректно отображает подменю сбоку. Другое меню «Аксессуары Apple», например, выводит подменю (чехол для мобильного телефона) из выравнивания. Оно отображается вверху, а не сбоку от меню.

Классы css

 <ul class='level1'> and <ul class='level2'>.

Я не могу найти проблему. Пожалуйста, помогите мне исправить css.

Ответ №1:

ДЕМОНСТРАЦИЯ

HTML

 <ul>
  <li class="submenu">
    <ul class="level2"></ul>
  </li>
</ul>

CSS

 .submenu{
    position:relative;
    height:15px
}
.submenu:hover > .level2{  /*target this li level2*/
    position:absolute;
    left:183px; /*width of submenu*/
    top:0;
}

Ответ №2:

Вы установили для этого элемента значение position: absolute with top: -2p; , поэтому он находится там, где он есть. Итак, чтобы ответить на ваш вопрос: «Пожалуйста, помогите мне исправить css». Оскорбительный CSS приведен ниже

 DIV#nav-cat UL UL.level2 {
z-index: 8007;
position: absolute;
border-bottom-color: #b0ccdc;
border-right-width: 2px;
background-color: #e8f1f6;
border-top-color: #b0ccdc;
width: 175px;
display: none;
border-top-width: 1px;
border-bottom-width: 3px;
border-right-color: #b0ccdc;
border-left-color: #b0ccdc;
border-left-width: 1px;
top: -2px;
left: 178px;
}

Чтобы устранить проблему, вам необходимо установить родительское значение на position: relative 

 DIV#nav-cat LI.submenu {
position: static; <-- remove this
position: relative; <-- add this
display: block;
background: url(../../../../../includes/templates/tpl_default/images/categoriescss_bg.gif) bottom no-repeat;
}

Я протестировал приведенный выше код в консоли Firefox, и он работает отлично.

Комментарии:

1. Итак, как я могу привести его в соответствие с главным меню.

2. если вы измените свой CSS DIV#nav-cat LI.submenu с position: static; на position: relative; все ваши проблемы будут решены.

3. Спасибо. Это сделало свое дело. Но подменю Apple accessories отображается с уменьшенной высотой, поскольку в нем есть только один элемент. Как я могу это исправить?

4. Вы можете установить a min-height для элемента.

5. Спасибо. Изменена высота строки: 27 пикселей; и минимальная высота: 27 пикселей;