CODEWITHSUNDEEP
htmlcssdrop-down-menumenusubmenu
Flash Bob
Flash Bob

Reputation: 5

Why do the sub-menus shift despite having position: absolute?

The sub-menus under the about link are a little shifted from the left even though I gave it position: absolute; left: 0px.

Basically, I want all the menu items (including sub-menus) to be overlapped. Here is the code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav{
position:relative;

}

#menu {


position:absolute;
left:0px;
margin: 0;
padding: 0;

}

#menu ul{
    position:absolute;

    left:0px;
    list-style: none;
}

#menu li {

line-height:40px;
font: 100%;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background: #333333;
border-bottom:#444444 thin solid;
}
#menu a {
color: #CCCCCC;
text-decoration: none;


margin: 0;

padding: 8px 12px;*/
text-decoration: none;
font-weight:bold;
}
#menu a:hover {

color: #fff;
padding-bottom: 8px;
}



</style>

</head>
<body>
<div class="nav">

            <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a>
                <ul>
                    <li><a href="#">Bio</a></li>
                    <li><a href="#">Blog</a>                        
                        <ul>
                            <li><a href="#">Bloger   Blog</a></li>
                            <li><a href="#">Wordpress Blog</a></li>
                            <li><a href="#">other</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Hobby</a></li>
                </ul>
                </li>

            <li><a href="#">Gallery</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Contact</a></li>
            </ul>

</div>
</body>
</html>

Upvotes: 0

Views: 218

Answers (1)

Bryan Downing
Bryan Downing

Reputation: 15472

Try adding margin: 0; padding: 0; to #menu UL.

Upvotes: 1

Related Questions