Html 带有水平子菜单的水平菜单

我正在尝试使用水平子菜单制作水平菜单。我尝试了一些方法，但没有成功：上面的代码应该显示水平主菜单，当您将鼠标悬停在其中一个链接上时，链接的颜色会发生变化，并显示一个水平子菜单

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>

---

您正试图将

元素放入另一个

元素中，但位于

元素之外。这是不允许的，所有内容都应该在

元素中，就像在

情况下，

元素之外的所有内容都会破坏布局

---

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

无需js：您可以将每个菜单点作为单个

div

浮动在

div

中，并将

溢出：隐藏在水平线上。当悬停在周围的一个div上时，
您可以将其高度最大化，因此下面有空间放置第二个水平菜单，该菜单已放置在
div
中

您还可以最大化它的宽度，这样它就有足够的宽度来显示第二个水平菜单

第三，你可以减少它的z-index，这样主菜单中的其他div仍然可以被悬停和选择，即使悬停的活动菜单项的最大宽度也是如此。
这篇文章可能会有所帮助（免责声明：这是我自己的文章！！）-我不想不友好，但这段代码有很多问题。两大技巧：去掉内联样式并将其移动到CSS中，然后使用（使用“直接输入”选项卡上的“验证HTML片段”选项仅验证代码片段）和来发现错误。
#menu
{ position: absolute;
right: 550px;
bottom: 460px;
z-index: 2;
font-style: italic ;
font-size: large ; 
}

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