ul嵌套，li加背景图片后出现重叠，请教如何解决_html/css_WEB-ITnose

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的。
有插入图片功能
 

已经贴上了，感谢！

是这效果?

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

是这效果?

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

不好意思，昨天莫名奇妙地IP被封了，上都上不去，今天才来结贴。感谢！问题解决。不知是什么原因会产生重叠。

第一个ul的li不能定义高度