Question

在下面它是一个带下拉子菜单的菜单。

在Chrome中，子菜单显示在菜单下方，但在Firefox和IE中，它们始终显示在第一个项目下方。

如果我更改了“浮动：无”＆＃39;到＆＃39;浮动：左＆＃39;它工作，它们出现在菜单下方，但所有子菜单项都变为内联并逐个流动。

是否有一个简单的修复（而不是修改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>

Answer 1

将float:none更改为float:left上的#cat_nav ul li并添加此

#cat_nav ul li li {
  float:none
}

取消浮动列表项中的列表项（因此显示为堆叠而非内联）。

Answer 2

您需要编辑您的选择和定位。我在firefox中测试了一个工作示例，对你的代码进行了一些小的编辑。见下文。

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

html子菜单没有显示在下面的菜单中

2 个答案: