这是一个下拉菜单栏，请问CSS代码中.menu ul li position:relative有什么用呢？也就是滴三段CSS代码
.menu{font-family:arial,sans-serif;width:440px;margin:0;}.menuul{padding:0;margin:0;l...
.menu {
font-family: arial, sans-serif;
width:440px;
margin:0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left; /* 列表横向显示*/
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#5678ee;
line-height:30px;
font-size:14px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
display:block;
background:#ff4321;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">DEMOS</a>
<ul>
<li><a href="#">zero dollars</a></li>
<li><a href="#">wrapping text</a></li>
<li><a href="#">styled form</a></li>
</ul>
</li>
<li><a href="#">MENUS</a>
<ul>
<li><a href="#">spies menu</a></li>
<li><a href="#">vertical menu</a></li>
<li><a href="#">enlarging list</a></li>
</ul>
</li>
<li><a href="#">LAYOUTS</a>
<ul>
<li><a href="#">Fixed 1</a></li>
<li><a href="#">Fixed 2</a></li>
</ul>
</li>
<li><a href="#">BOXES</a>
<ul>
<li><a href="#">spies menu</a></li>
<li><a href="#">vertical menu</a></li>
<li><a href="#">enlarging list</a></li>
</ul>
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html> 展开
font-family: arial, sans-serif;
width:440px;
margin:0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left; /* 列表横向显示*/
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#5678ee;
line-height:30px;
font-size:14px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
display:block;
background:#ff4321;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">DEMOS</a>
<ul>
<li><a href="#">zero dollars</a></li>
<li><a href="#">wrapping text</a></li>
<li><a href="#">styled form</a></li>
</ul>
</li>
<li><a href="#">MENUS</a>
<ul>
<li><a href="#">spies menu</a></li>
<li><a href="#">vertical menu</a></li>
<li><a href="#">enlarging list</a></li>
</ul>
</li>
<li><a href="#">LAYOUTS</a>
<ul>
<li><a href="#">Fixed 1</a></li>
<li><a href="#">Fixed 2</a></li>
</ul>
</li>
<li><a href="#">BOXES</a>
<ul>
<li><a href="#">spies menu</a></li>
<li><a href="#">vertical menu</a></li>
<li><a href="#">enlarging list</a></li>
</ul>
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html> 展开
1个回答
展开全部
设为相对定位，为了让下级的ul的绝对定位以它为起始点
也就是 menu ul li:hover ul 这句 里面的top和left的距离是从menu ul li这开始算的
也就是 menu ul li:hover ul 这句 里面的top和left的距离是从menu ul li这开始算的
追问
哦 原来是这样，谢谢你。。那我看menu 和 menu ul的margin padding是0，那他设不设置relative都没什么影响呢？
追答
是的，一般的情况下relative设置以后主要是为了让下级的absolute以它为起始点而已，对本身没多大影响
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
