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>
现在这个导航菜单的二级菜单离一级菜单很远，到底是那里出问题了...请高手帮帮忙，看看是那里出问题！ 展开
<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>
现在这个导航菜单的二级菜单离一级菜单很远，到底是那里出问题了...请高手帮帮忙，看看是那里出问题！ 展开
展开全部
改动的地方
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>
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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.nav li{
width:150px;;
float:left;
margin-left:25px;
margin-right:17px;
text-align:center;
}
其中的 margin影响的..想其它办法改进
width:150px;;
float:left;
margin-left:25px;
margin-right:17px;
text-align:center;
}
其中的 margin影响的..想其它办法改进
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的
.nav li{}样式里面默认的
margin-left 25px;
这个就是2级菜单距离前面25个像素。调小或者变成0像素就好了
.nav li{}样式里面默认的
margin-left 25px;
这个就是2级菜单距离前面25个像素。调小或者变成0像素就好了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
