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

 我来答

4个回答

#热议# 普通体检能查出癌症吗？

杂货铺小店
2011-05-30 · 互联网学习资料，计算机编程。

杂货铺小店

采纳数：138 获赞数：549

向TA提问私信TA

关注

展开全部

#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就可以了。

已赞过 已踩过<

评论收起

vurtne3691
2011-05-30 · TA获得超过860个赞

知道答主

回答量：129

采纳率：0%

帮助的人：73.7万

我也去答题访问个人页

关注

展开全部

#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就可以了

参考资料： http://www.w3school.com.cn/css/pr_padding.asp

已赞过 已踩过<

评论收起

chxyou
2011-05-30 · TA获得超过389个赞

知道小有建树答主

回答量：466

采纳率：82%

帮助的人：240万

我也去答题访问个人页

关注

展开全部

<!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；像素的问题

已赞过 已踩过<

评论收起

匿名用户
2011-06-09

展开全部

这里有一个js的多级联动下拉菜单
可以自定义位置和样式比较实用
里面有教程和源码

参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?3=e&id=11931

本回答被提问者采纳

已赞过 已踩过<

评论收起

更多回答（2）

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

您可能关注的内容

腾讯元宝-智能ai写作、写报告、写方案，一键高效生成

AI生成ppt，秒出PPT，轻松制作PPT，简单易学!1个AI分身，玩转50+爆款模版

yuanbao.tencent.com广告

div+css，横向导航菜单 二级下拉导航菜单 不可以对齐显示。请帮我解决下。谢谢。

您可能关注的内容

其他类似问题

为你推荐：

div+css，横向导航菜单二级下拉导航菜单不可以对齐显示。请帮我解决下。谢谢。