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

Question

问题描述：
主要用于实现竖直菜单，主菜单有二级子菜单，想通过使用ul嵌套实现子菜单功能，菜单使用背景色没有问题，但替换成背景图片，结果使主菜单的ul与子菜单的ul重叠，一直未解决，请各位帮帮忙。

具体代码如下：

html代码：

• 相关法规
  • 操作员计算机IE设置
  • 电子签章办理须知
• 相关下载

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

Answer 1

#menu ul li你这样会给所有在#menu ul 里面的li加背景包括#menu ul li ul li 肯定会出现重叠的呀，应该给具体的某个li加选中样式，
比如专门设置active样式，但是这样的话，只能给最低级别的那个li加，因为高层级的包含低层级的li，这个li会被子级撑开，所以还会重叠，最好的办法，是单独加给每一个li添加一个div来做这个选中状态，div定位就可以了。然后有active class的就让div显示就ok

• 
  
  
  系统管理员
  
  
  
  


• 
  
  
  分组权限
  
  
  
  


• 
  
  
  帐号绑定
  
  
  
  
  
  
  • 
    
    
    微信绑定
    
    
    
  
  这是我的一个例子，可以参考