Блог

Главная - Вопросы по программированию - подменю html не отображается под меню

подменю html не отображается под меню

#html #css

#HTML #css

Вопрос:

Ниже это меню с выпадающими подменю.

В Chrome подменю отображаются под меню, но в Firefox и IE они всегда отображаются под первым пунктом.

Если я изменю ‘float: none’ на ‘float: left’, это сработает, и они появятся под меню, но все пункты подменю станут встроенными и будут следовать один за другим.

Есть ли простое исправление (вместо изменения html, поскольку оно генерируется из XML-файла на сервере, но я могу изменить, если потребуется) в css?

Спасибо.

 <html>
<head>
<style>

#cat_nav li > ul { display: none; }
#cat_nav ul{list-style-type: none;}
#cat_nav ul li {float: none; position: relative} /*change float to not none and it aligns but items are inline */
#cat_nav ul li:hover > ul {display: block;}
#cat_nav ul ul {min-width: 150px;background-color:#DFDFDF;padding:4px 0 4px 0;position:absolute;}

</style>


</head><body>

    <nav id="cat_nav">
    <ul class="products_btn">
        <li style="display: inline">
            <a href="">PCBS1</a>
            <ul class="dropdown">
                <li> <a href="x" title="Fuzz">Fuzz 1-1</a></li>
                <li> <a href="x" title="Fuzz">Fuzz 1-2</a></li>
                <li> <a href="x" title="Fuzz">Fuzz 1-3</a></li>
            </ul>
        </li>
        <li style="display: inline">
            <a href="">PCBS2</a>
            <ul class="dropdown">
                <li> <a href="x" title="Fuzz">Fuzz 2-1</a></li>
                <li> <a href="x" title="Fuzz">Fuzz 2-2</a></li>
                <li> <a href="x" title="Fuzz">Fuzz 2-3</a></li>
            </ul>
        </li>
    </ul>
</body></html>

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

1. Это #cat_nav ul li предназначено для ВСЕХ li , если вы хотите, чтобы подменю выполняло что-то еще, вам придется настроить их отдельно.

Ответ №1:

Измените значение float:none на float:left вкл #cat_nav ul li и добавьте это

 #cat_nav ul li li {
  float:none
}

чтобы отменить перемещение элементов списка в элементах списка (и, таким образом, они отображаются в виде стека, а не встроены).

Ответ №2:

Вам нужно отредактировать выбор и позиционирование. Я внес несколько небольших изменений в ваш код с помощью рабочего примера, протестированного в firefox. Смотрите ниже.

ДЕМОНСТРАЦИЯ http://jsfiddle.net/RDQW8/1 /

 #cat_nav li > ul {
    display: none;
}
#cat_nav ul {
    list-style-type: none;
}
#cat_nav ul > li {
    position: relative
}
/*change float to not none and it aligns but items are inline */
 #cat_nav ul li:hover > ul {
    display: inline-block;
}
#cat_nav ul ul {
    min-width: 150px;
    background-color:#DFDFDF;
    padding:4px 0 4px 0;
    top:15px;
    position:absolute;
}
Метки: