html css
问题描述：
主要用于实现竖直菜单，主菜单有二级子菜单，想通过使用ul嵌套实现子菜单功能，菜单使用背景色没有问题，但替换成背景图片，结果使主菜单的ul与子菜单的ul重叠，一直未解决，请各位帮帮忙。
具体代码如下：
html代码:
<div id="menu"> <ul> <li><a href="#" >相关法规</a> <ul> <li><a href="#">操作员计算机IE设置</a></li> <li><a href="#">电子签章办理须知</a></li> </ul> </li> <li><a href="#" onclick="Show('load')">相关下载</a></li> </ul> </div> CSS代码：
<style type="text/css"> #menu { width:400px; padding:0px; margin:0px; } /*去掉列表前的圆点*/ #menu ul { list-style-type:none; padding:0px; margin:0px; } #menu ul li { width:310px; height:36px; position:relative; top:auto; /*背景图片（问题点）*/ background:url(images/btn_menu_live.jpg) repeat; } #menu ul li a { display:block; /*先转化成块级元素*/ width:310px;/*填充满整个边栏*/ height:36px; color:Gray; text-align:left; text-decoration:none; padding:10px 0px 10px 30px;/*设置距离左侧的边栏和上边距*/ font-size:14px; } /*设置子菜单的样式*/ #menu ul li ul { list-style-type:none; } #menu ul li ul li { width:310px; /*通过设置宽度来填充*/ height:36px; position:relative; top:auto; background:url(images/btn_menu_on.jpg) repeat;} #menu ul li ul li a { display:block; /*此处可以通过设置来调整相关的样式*/ width:310px;/*填充满整个边栏*/ height:36px; padding:6px 0px 6px 60px; text-align:left; text-decoration:none; font-size:12px; } </style> 回复讨论(解决方案)
background:url(images/btn_menu_on.jpg) no-repeat;
你把 btn_menu_live.jpg，btn_menu_on.jpg 帖上来
background:url(images/btn_menu_on.jpg) no-repeat;
不行的。
你把 btn_menu_live.jpg，btn_menu_on.jpg 帖上来
怎么贴？没附件上传功能。图片尺寸是130X36的。
贴上btn_menu_live.jpg，btn_menu_on.jpg 两张背景图片
你把 btn_menu_live.jpg，btn_menu_on.jpg 帖上来
怎么贴？没附件上传功能。图片尺寸是130X36的。
有插入图片功能
你把 btn_menu_live.jpg，btn_menu_on.jpg 帖上来
怎么贴？没附件上传功能。图片尺寸是130X36的。
有插入图片功能
已经贴上了，感谢！
是这效果?
<!doctype html><html><body><style type="text/css"> #menu { width:400px; padding:0px; margin:0px; } /*去掉列表前的圆点*/ #menu ul { list-style-type:none; padding:0px; margin:0px; } #menu ul li { width: 310px; top: auto; margin-top: 5px; background: url(btn_menu_live.jpg) no-repeat; } #menu ul li a { display:block; /*先转化成块级元素*/ width:310px;/*填充满整个边栏*/ height: 26px; color:Gray; text-align:left; text-decoration:none; padding: 10px 0 0 30px;/*设置距离左侧的边栏和上边距*/ font-size:14px; } /*设置子菜单的样式*/ #menu ul li ul { list-style-type:none; } #menu ul li ul li { width:310px; /*通过设置宽度来填充*/ height:36px; position:relative; top:auto; background:url(btn_menu_on.jpg) repeat;} #menu ul li ul li a { display:block; /*此处可以通过设置来调整相关的样式*/ width:310px;/*填充满整个边栏*/ height:36px; padding:6px 0px 6px 60px; text-align:left; text-decoration:none; font-size:12px; } </style> <div id="menu"> <ul> <li><a href="#" >相关法规</a> <ul> <li><a href="#">操作员计算机IE设置</a></li> <li><a href="#">电子签章办理须知</a></li> </ul> </li> <li><a href="#" onclick="Show('load')">相关下载</a></li> </ul> </div> </body></html> 是这效果?
<!doctype html><html><body><style type="text/css"> #menu { width:400px; padding:0px; margin:0px; } /*去掉列表前的圆点*/ #menu ul { list-style-type:none; padding:0px; margin:0px; } #menu ul li { width: 310px; top: auto; margin-top: 5px; background: url(btn_menu_live.jpg) no-repeat; } #menu ul li a { display:block; /*先转化成块级元素*/ width:310px;/*填充满整个边栏*/ height: 26px; color:Gray; text-align:left; text-decoration:none; padding: 10px 0 0 30px;/*设置距离左侧的边栏和上边距*/ font-size:14px; } /*设置子菜单的样式*/ #menu ul li ul { list-style-type:none; } #menu ul li ul li { width:310px; /*通过设置宽度来填充*/ height:36px; position:relative; top:auto; background:url(btn_menu_on.jpg) repeat;} #menu ul li ul li a { display:block; /*此处可以通过设置来调整相关的样式*/ width:310px;/*填充满整个边栏*/ height:36px; padding:6px 0px 6px 60px; text-align:left; text-decoration:none; font-size:12px; } </style> <div id="menu"> <ul> <li><a href="#" >相关法规</a> <ul> <li><a href="#">操作员计算机IE设置</a></li> <li><a href="#">电子签章办理须知</a></li> </ul> </li> <li><a href="#" onclick="Show('load')">相关下载</a></li> </ul> </div> </body></html>不好意思，昨天莫名奇妙地IP被封了，上都上不去，今天才来结贴。感谢！问题解决。不知是什么原因会产生重叠。
第一个ul的li不能定义高度
