我正在尝试制作一个带有水平子菜单的水平菜单。我尝试了一些方法,但没有用:上面的代码应该显示水平主菜单,当您将鼠标悬停在其中一个链接上时,链接的颜色会发生变化,并且会出现一个水平子菜单。
html代码:
<div id="menu">
<ul>
<li style="float: left; a:hover; "><a href="acceuil.html" style="color : #CBCAC7 ;">ACCEUIL</a> <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> <img src="decoupage/puce_menu.png" height="15"/>
<li style="float: left; "><a href="references.html" style="color : #CBCAC7 ;">REFERENCES</a> <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> <img src="decoupage/puce_menu.png" height="15"/>
<li style="float: left; "><a href="contact.html" style="color : #CBCAC7 ;">CONTACT</a></li> <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;}
最佳答案
您正试图将 <ul>
元素转换成另一个 <ul>
元素但在 <li>
之外元素。不允许,一切都应该在<li>
元素,如 <table>
案例,<td>
之外的一切元素破坏了布局。
我会建议你先修改你的HTML结构,然后再考虑css样式
关于html - 带有水平子菜单的水平菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11541467/