1

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

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

2 回答 2

2

您正在尝试将<ul>元素放入另一个<ul>元素但在<li>元素之外。这是不允许的，一切都应该在<li>元素中，<table>以防万一，元素之外的一切都<td>破坏了布局。

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

于 2012-07-18T12:38:13.877 回答
0

不需要 js：您可以将每个菜单点作为一个单独div的在div水平overflow:hidden线上浮动。当悬停其中一个周围的 div 时，您将其高度最大化，因此下方有空间放置您的第二个水平菜单，该菜单已放置在div.

您还可以将其宽度最大化，使其获得足够的宽度，以显示第二个水平菜单。

第三，减少它的z-index，因此主菜单中的其他 div 仍然可以悬停和选择，即使悬停的活动菜单项的宽度已达到最大。

于 2014-02-02T12:01:10.917 回答