CODEWITHSUNDEEP
htmlcss
Vinc199789
Vinc199789

Reputation: 1046

menu collapsing horizontal

I am trying to make a menu that collaps horizontal. When you hover over an item, the submenu should collaps on the right side but The problem that the submenu is collapsing over the hovered item like you can see in the demo.

demo

html:

<div id="menu">
    <div class="banner">Site name</div>
    <ul>
        <li><a href="">item 1</a>
            <ul>
                <li><a href="">sub 1</a></li>
                <li><a href="">sub 2</a></li>
                <li><a href="">sub 3</a></li>
            </ul>
        </li>
        <li><a href="">item 2</a></li>
        <li><a href="">item 3</a></li>
        <li><a href="">item 4</a></li>
    </ul>
</div>

css:

body{
margin: 0px;
padding:0px;
}
.banner{
color: #ccc;
font-size: 20px;
font-family: Arial;
padding-bottom: 15px;
padding-top:15px;
width:100%;
}
#menu{
background-color:#222;
min-width:20%;
width: auto;
height:100%;
position: absolute;
}
#menu ul{
margin: 0px;
padding:0px;
}
#menu ul li{
list-style-type: none;
padding-bottom: 15px;
padding-top:15px;
width:100%;
}
#menu ul li a{
text-decoration: none;
color: #ccc;
font-size: 20px;
font-family: Arial;
}
#menu ul li:hover{
background-color: white;
}
#menu ul li:hover a{
color: #222;
}
#menu ul li:hover ul{
display: block;
}
#menu ul ul{
position: absolute;
display: none;
background-color:red;
margin-left:auto;
}

I hope somebody can help me to get the sub menu on the right place.

Upvotes: 0

Views: 727

Answers (1)

sinisake
sinisake

Reputation: 11328

#menu ul ul{
position: absolute;
display: none;
background-color:red;
    left:100%;
   width:100%;
    top:0;

}

And you should give position:relative to LI tag (parent):

#menu ul li{
list-style-type: none;
padding-bottom: 15px;
padding-top:15px;
width:100%;
    position:relative;
}

DEMO: http://jsfiddle.net/4aqyzLt3/1/

Upvotes: 1

Related Questions