CSS+DIV二级菜单问题，高手请进...

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.nav{
width:960px;
height:38px;
font-size:14PX;
background:#FF6600;
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
}
.nav ul{
list-style-type:none;
margin:0;
padding:0;
line-height:38px;
}
.nav li{
width:150px;;
float:left;
margin-left:25px;
margin-right:17px;
text-align:center;
}
.nav li a{
display:block;
text-decoration:none;
color:#666666;
}
.nav li a:hover{
background:#000000;
color:#FFFFFF;
}
.nav ul ul {visibility:hidden;position:absolute; line-height:20px;}
.nav ul li:hover ul,
.nav ul a:hover ul{visibility:visible;}
.nav ul ul{}
.nav ul ul li {clear:both;text-align:left;font-size:12px; height:20px;}
.nav ul ul li a{display:block;width:150px;height:20px;margin:0;border:0; background:#999900;}
.nav ul ul li a:hover{border:0;background:#00FF33;border-bottom:1px solid #fff; color:#000000;}
</style>
</head>

<body>
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Domains</a></li>
<li><a href="">Chinese Domains</a></li>
<li><a href="">Hosting</a></li>
<li><a href="">Email</a>
<ul>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
<li><a href="">tewst</a></li>
<li><a href="">test</a></li>
<li><a href="">tewst</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
现在这个导航菜单的二级菜单离一级菜单很远，到底是那里出问题了...请高手帮帮忙，看看是那里出问题！展开

 我来答

4个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

百度网友d027605
2010-04-21 · TA获得超过274个赞

知道答主

回答量：128

采纳率：0%

帮助的人：92万

我也去答题访问个人页

关注

展开全部

改动的地方
1 .nav li的width:150px;移到.nav li a中
2 .nav ul ul和.nav ul ul li中加上margin-left:0;

你这是典型的块级元素乱用所致，没有必要都加宽度的，既然你的标签<a>声明为块级了，干嘛还在.nav li中加？
给我加分呵呵个人邮箱addedme@163.com 专职在公司做div的，有事找我。

完整代码给你贴一下，仅供参考（除了上述2点，其他未做改动，你图省事的话）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.nav{
width:960px;
height:38px;
font-size:14PX;
background:#FF6600;
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
}
.nav ul{
list-style-type:none;
margin:0;
padding:0;
line-height:38px;
}
.nav li{

float:left;
margin-left:25px;
margin-right:17px;
text-align:center;
}
.nav li a{
width:150px;
display:block;
text-decoration:none;
color:#666666;
}
.nav li a:hover{
background:#000000;
color:#FFFFFF;
}
.nav ul ul {visibility:hidden;position:absolute; margin-left:0; line-height:20px;}
.nav ul li:hover ul,
.nav ul a:hover ul{visibility:visible;}
.nav ul ul{}
.nav ul ul li {clear:both;text-align:left; margin-left:0;font-size:12px; height:20px;}
.nav ul ul li a{display:block;width:150px;height:20px;margin:0;border:0; background:#999900;}
.nav ul ul li a:hover{border:0;background:#00FF33;border-bottom:1px solid #fff; color:#000000;}
</style>
</head>

<body>
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Domains</a></li>
<li><a href="">Chinese Domains</a></li>
<li><a href="">Hosting</a></li>
<li><a href="">Email</a>
<ul>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
<li><a href="">tewst</a></li>
<li><a href="">test</a></li>
<li><a href="">tewst</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

本回答由提问者推荐

已赞过 已踩过<

评论收起

百度网友53a7b793a
2010-04-20 · TA获得超过142个赞

知道答主

回答量：247

采纳率：0%

帮助的人：140万

我也去答题访问个人页

关注

展开全部

.nav li{
width:150px;;
float:left;
margin-left:25px;
margin-right:17px;
text-align:center;
}
其中的 margin影响的..想其它办法改进

已赞过 已踩过<

评论收起

wangdawei198
2010-04-20 · TA获得超过477个赞

知道答主

回答量：183

采纳率：0%

帮助的人：209万

我也去答题访问个人页

关注

展开全部

你的
.nav li{}样式里面默认的
margin-left 25px;
这个就是2级菜单距离前面25个像素。调小或者变成0像素就好了

已赞过 已踩过<

评论收起

匿名用户
2010-04-21

展开全部

IE吧？margin会加倍的

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

CSS+DIV二级菜单 问题，高手请进...

其他类似问题

为你推荐：

CSS+DIV二级菜单问题，高手请进...