注意事项:二级菜单并非ul li ul嵌套,就是第一级的ul和li,只是将一级菜单和二级菜单分别写两个菜单style
注意事项:二级菜单并非ul li ul嵌套,就是第一级的ul和li,只是将一级菜单和二级菜单分别写两个菜单style
/*css代码*/
/*这是一级菜单的style*/
.leftmenucontainer {
width: 70%;
margin: 5px 5px 5px 10px;
border: 1px solid #666;
padding:5px 5px 5px 5px;
}
#menuleft {
width: 140px;
border: 1px solid #ccc;
color: #505050;
display: block;
background: url(../images/menu3.gif);
padding: 0 0 0 0;
}
#menuleft li a {
height: 32px;
height: 24px;
text-decoration: none;
}
#menuleft li a:link,#menuleft li a:visited {
color: #505050;
display: block;
background: url(../images/menu3.gif);
padding: 8px 0 0 30px;
}
#menuleft li a:hover,#menuleft li a:active {
color: #013676;
background: url(../images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}
/*这是二级菜单的style*/
#leftmenu2 {
float:inherit;
width: 140px;
border-color: #D0D0D0;
border-width: 1px;
}
#leftmenu2 li a {
height: 32px;
height: 24px;
text-decoration: none;
BACKGROUND: url(../images/arrow.gif) no-repeat 8px 8px 8px 8px;
}
#leftmenu2 li a:link, #leftmenu2 li a:visited {
color: #FFF;
background: url(../images/menu5.gif);
padding: 8px 0 0 30px;
}
#leftmenu2 li a:hover, {
color: #FFF;
background: url(../images/menu5.gif) 0 -32px;
padding: 8px 0 0 30px;
}
/*js代码*//*将js代码嵌入到<style></style>标签下方*/
<script language="JavaS
function change_view(obj_name)
{
var aa=document.getElementById(obj_name);
if(aa.style.display=="")
{
aa.style.display="none";
}
else
{
aa.style.display="";
}
上一篇:关于CSS控制DIV水平居中问题
版权所有 2021-2024 石家庄建站平台 冀ICP备2022000585号-2 24小时服务热线:15383239821