div+css，横向导航菜单 二级下拉导航菜单 不可以对齐显示。请帮我解决下。谢谢。
<styletype="text/css">body{font-family:verdana;font-size:12px;line-height:1.5em;}a{co...
<style type="text/css">
body { font-family:verdana; font-size: 12px; line-height: 1.5em;}
a { color:#000; text-decoration: none;}
a:hover { color:#f00;}
#menu { width:500px; line-height:1.5em; margin:0 auto;}
#menu ul { list-style:none; margin:0; padding:0;}
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; padding:0 8px; background:#eee; text-align:center; border:1px solid #ccc;}
#menu ul li ul { list-style:none; margin:0; padding:0; display:none; }
#menu ul li:hover ul { display:block; float:none;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html> 展开
body { font-family:verdana; font-size: 12px; line-height: 1.5em;}
a { color:#000; text-decoration: none;}
a:hover { color:#f00;}
#menu { width:500px; line-height:1.5em; margin:0 auto;}
#menu ul { list-style:none; margin:0; padding:0;}
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; padding:0 8px; background:#eee; text-align:center; border:1px solid #ccc;}
#menu ul li ul { list-style:none; margin:0; padding:0; display:none; }
#menu ul li:hover ul { display:block; float:none;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html> 展开
展开全部
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; padding:0 8px; background:#eee; text-align:center; border:1px solid #ccc;}
这行把内边距8px去掉，给width:80px改为96px就可以了。
这行把内边距8px去掉，给width:80px改为96px就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; padding:0 8px; background:#eee; text-align:center; border:1px solid #ccc;}
中的 padding 属性 你设置了 0 8px 意思是 你的上和下内边距是0 左右内边距是 8像素 把8像素改为0就可以了
中的 padding 属性 你设置了 0 8px 意思是 你的上和下内边距是0 左右内边距是 8像素 把8像素改为0就可以了
参考资料： http://www.w3school.com.cn/css/pr_padding.asp
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body { font-family:verdana; font-size: 12px; line-height: 1.5em;}
a { color:#000; text-decoration: none;}
a:hover { color:#f00;}
#menu { width:500px; line-height:1.5em; margin:0 auto;}
#menu ul { list-style:none; margin:0; padding:0;}
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; background:#eee; text-align:center; border:1px solid #ccc;}
#menu ul li ul { list-style:none; margin:0; padding:0; display:none; }
#menu ul li:hover ul { display:block; float:none;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
你设置padding：0 8px；像素的问题
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body { font-family:verdana; font-size: 12px; line-height: 1.5em;}
a { color:#000; text-decoration: none;}
a:hover { color:#f00;}
#menu { width:500px; line-height:1.5em; margin:0 auto;}
#menu ul { list-style:none; margin:0; padding:0;}
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; background:#eee; text-align:center; border:1px solid #ccc;}
#menu ul li ul { list-style:none; margin:0; padding:0; display:none; }
#menu ul li:hover ul { display:block; float:none;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
你设置padding：0 8px；像素的问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
可以自定义位置和样式 比较实用
里面有教程和源码
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?3=e&id=11931
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
