ul is nested, and li overlaps after adding a background image. Please tell me how to solve it_html/css_WEB-ITnose

html css

Problem description:
is mainly used to implement vertical menus. The main menu has two-level submenus. I want to implement the submenu function by using ul nesting. There is no problem with using the background color of the menu. , but replaced with a background image, the result is that the ul of the main menu overlaps with the ul of the submenu, which has not been solved. Please help.

The specific code is as follows:
HTML code:

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

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

Reply to the discussion (solved Solution)

background:url(images/btn_menu_on.jpg) no-repeat;

Post btn_menu_live.jpg, btn_menu_on.jpg

background:url(images /btn_menu_on.jpg) no-repeat;

No.

Post btn_menu_live.jpg, btn_menu_on.jpg
How to post it? There is no attachment upload function. The image size is 130X36.

Post btn_menu_live.jpg, btn_menu_on.jpg two background pictures

Post btn_menu_live.jpg, btn_menu_on.jpg
How to post it ? There is no attachment upload function. The image size is 130X36.
There is a function to insert pictures

Post btn_menu_live.jpg, btn_menu_on.jpg
How to post it? There is no attachment upload function. The image size is 130X36.
There is a function to insert pictures


Already posted, thank you!

Is this the effect? ​​

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

Is this the effect? ​​

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

Sorry, the IP was blocked for no apparent reason yesterday. I can't even get up there, so I just came here today. grateful! Problem solved. I don't know why there is overlap.

The li of the first ul cannot define the height