石家庄建站平台

十年经验 优惠价格 贴心服务

服务热线 15383239821

使用css、li、ul、div及js制作二级树形下拉菜单

发布时间:2011-04-01    来源:

注意事项:二级菜单并非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="JavaScript" type="text/JavaScript">

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水平居中问题

下一篇:SQL Server"选定的用户拥有对象,所以无法除去该用户"

还没开展互联网业务? 马上开始

关注多多建站公众号
扫码加好友