新闻资讯

使用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="";

                         }

服务热线

服务热线

15383239821

微信咨询
微信二维码
返回顶部
×微信二维码

截屏,微信识别二维码

微信号:

(点击微信号复制,添加好友)

打开微信

微信号已复制,请打开微信添加咨询详情!