I am trying to make an horizontal menu with horizontal submenu. I’ve tried something but it didn’t work : the code above was supposed to display the horizontal main menu , when you hover on one of the links the color of the link changes and an horizontal submenu appears.
html code:
<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 code
#menu
{ position: absolute;
right: 550px;
bottom: 460px;
z-index: 2;
font-style: italic ;
font-size: large ;
}
#menu li.hover ul {
display: inline;}
You are trying to put
<ul>element into another<ul>element but outside of<li>element. It is not allowed, everything should be in<li>element, like in<table>case, everything outside of<td>element breaks the layout.I would recomment you at first revise the structure of your HTML, then think about the css styles