1 reply [Last post]
udayancht
udayancht's picture
Offline
newbie
Last seen: 5 years 19 weeks ago
Timezone: GMT+6
Joined: 2014-07-31
Posts: 1
Points: 2

#navcontainer{
background:#222;
width:100%;
}
#navcontainer ul{
text-align:center;
margin:0;
padding:0;
list-style:none;
width:100%;
}
#navcontainer ul li{
display:inline;
position:relative;
}
#navcontainer ul li a{
display:inline-block;
color:#fff;
font-size:20px;
padding:20px 30px;
}
#navcontainer ul li a:hover{
background:#999;
}
#navcontainer ul ul{
position:absolute;
left:0;
top:46px;
z-index:10;
width:100%;
display:none;
background:red;
}
#navcontainer ul ul li{
float:none;
}
#navcontainer ul ul li a{
text-align:left;
}
#navcontainer ul li:hover ul{
display:block;
}
<div id="navcontainer">
        <ul>
            <li><a href="#">Milk</a></li>
 
            <li>
                <a href="#">Eggs</a>
 
                <ul>
                    <li><a href="">sub menu</a></li>
 
                    <li><a href="">sub menu</a></li>
 
                    <li><a href="">sub menu</a></li>
 
                    <li><a href="">sub menu</a></li>
                </ul>
            </li>
 
            <li><a href="#">Cheese</a></li>
 
            <li><a href="#">Vegetables</a></li>
 
            <li><a href="#">Fruit</a></li>
        </ul>
    </div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi udayancht, With the LI set

Hi udayancht,
With the LI set to position:relative the submenu positions itself from it instead of the body.

#navcontainer ul li{
display:inline;
/*position:relative;*/
}