Question

即使我给了它position: absolute; left: 0px，about链接下的子菜单也会从左边稍微偏移。

基本上，我希望所有菜单项（包括子菜单）都重叠。这是代码。

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

Answer 1

尝试将margin: 0; padding: 0;添加到#menu UL。

尽管有位置：绝对，为什么子菜单会改变？

1 个答案: