yuan1169 2013-08-31 09:14 采纳率: 0%
浏览 4094

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

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

具体代码如下:

html代码:

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; }
  • 写回答

2条回答 默认 最新

  • 幽竹小妖 2018-04-25 03:24
    关注

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




    • 系统管理员





    • 分组权限





    • 帐号绑定





      • 微信绑定


      • 这是我的一个例子,可以参考
    评论

报告相同问题?

悬赏问题

  • ¥15 我这模型写的不对吗?为什么lingo解出来的下面影子价格这一溜少一个变量
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波