CODEWITHSUNDEEP
htmlcss
marcAntoine
marcAntoine

Reputation: 678

horizontal menu with horizontal submenu

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>&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 code

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

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

Upvotes: 1

Views: 5644

Answers (2)

jayden
jayden

Reputation: 1

no js needed: You may float each menu-point as a single div in div with overflow:hidden in a horizontal line. When hovering one of the surrounding divs, you max up its height, so there is room below for your second horizontal menu, which is already placed inside the div.

Also you max up its width, so it gets enough width, to display the second horizontal menu.

Third, you decrease its z-index, so the other divs from the main menu can still be hovered and selected, even with the maxed up width of the hovered, active menu-item.

Upvotes: 0

haynar
haynar

Reputation: 6040

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

Upvotes: 2

Related Questions