Question

我正在尝试使用水平子菜单制作水平菜单。我尝试了一些东西，但它不起作用：上面的代码应该显示水平主菜单，当你将鼠标悬停在其中一个链接上时，链接的颜色会发生变化，并出现水平子菜单。

html代码：

<div id="menu">
    <ul>

        <li style="float: left; a:hover;  "><a   href="acceuil.html"    style="color : #CBCAC7 ;">ACCEUIL</a>&nbsp;&nbsp;<img src="decoupage/puce_menu.png"   height="15"/>
        <ul>
        <li style="float: left; display: none; "><a href="#">Présentation</a>  </li>
        </ul>
        </li>
        <li style="float: left; "><a href="methodologie.html" style="color   : #CBCAC7 ;" >METHODOLOGIE</a></li>&nbsp;&nbsp;<img src="decoupage/puce_menu.png"   height="15"/>
        <li style="float: left; "><a href="references.html" style="color :   #CBCAC7 ;">REFERENCES</a>&nbsp;&nbsp;<img src="decoupage/puce_menu.png" height="15"/>
        <ul>
    <li style="float: left; display: none; "><a href="#">Urbanisme</a></li>
    <li style="float: left; display: none; "><a href="#">Tours</a></li>
    <li style="float: left; display: none; "><a href="#">Bureau</a></li>
    <li style="float: left; display: none; "><a href="#">Commerce</a></li>
    <li style="float: left; display: none; "><a href="#">Logements</a></li>
    </ul>
    </li>
        <li style="float: left; "><a href="partenaires.html" style="color :       #CBCAC7 ;">PARTENAIRES</a></li>&nbsp;&nbsp;<img src="decoupage/puce_menu.png" height="15"/>
        <li style="float: left; "><a href="contact.html" style="color :          #CBCAC7 ;">CONTACT</a></li>&nbsp;&nbsp;<img src="decoupage/puce_menu.png" height="15"/>
    </ul>
</div>

CSS代码

#menu
{ position: absolute;
right: 550px;
bottom: 460px;
z-index: 2;
font-style: italic ;
font-size: large ; 
}

#menu li.hover ul { 
display: inline;}

Answer 1

您正尝试将<ul>元素放入另一个<ul>元素但不在<li>元素之外。这是不允许的，一切都应该在<li>元素中，就像在<table>情况下一样，<td>元素之外的所有内容都会破坏布局。

我建议您首先修改HTML的结构，然后再考虑css样式

Answer 2

不需要js：您可以将div中的每个菜单点作为单个div浮动，并在水平线中放置overflow:hidden。当盘旋周围的一个div时，你最大的高度，所以你的第二个水平菜单下面有空间，它已放在div内。

此外，您最大化其宽度，以便获得足够的宽度，以显示第二个水平菜单。

第三，你减少了它的z-index，所以主菜单中的其他div仍然可以悬停和选择，即使是悬停的活动菜单项的最大向上宽度。

带水平子菜单的水平菜单

2 个答案: