问题描述:
主要用于实现竖直菜单,主菜单有二级子菜单,想通过使用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;
}