阿赛·游梦鱼·郭言赛·阿赛工作室
全站技术源码素材

纯DIV+CSS多级导航菜单

  • 发布时间:2016年6月23日12时46分0秒 发布:asai 编辑:asai 字体:
  • 代码:

    <!doctype html>
    <html> 
    <head>
    <meta charset="utf-8">
    <TItle>纯DIV+CSS多级导航菜单</title>
    <meta name="keywords" content="纯DIV+CSS多级导航菜单,阿赛原创网站系统,EESai">
    <meta name="description" content="纯DIV+CSS多级导航菜单,EESai-阿赛原创网站系统,专业网站系统,安全网站系统,ASP网站系统">
    <meta name="copyright" content="纯DIV+CSS多级导航菜单,阿赛原创网站系统,EESai.Com,阿赛,郭言赛">
    <link rel="icon" Href="/eesai_skin/img/favicon.ico" mce_href="/eesai_skin/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" Href="/eesai_skin/img/favicon.ico" mce_href="/eesai_skin/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" rev="stylesheet" Href="/eesai_skin/eesai.css">
    <link rel="stylesheet" type="text/css" rev="stylesheet" Href="/eesai_skin/eesaisyscss.css">
    <link rel="stylesheet" type="text/css" rev="stylesheet" Href="/eesai_skin/sys.css">

    <style type="text/css"> 
    .l-mu{height:45px;line-height:45px;background:#0088EE url(img/bgmenu.png) repeat-x 0 0;}
    .l-mu a{display:block;position:relative;height:45px;text-align:center;text-decoration:none;}
    .l-mu a:hover{text-decoration:none;font-weight:bold;}
    .l-mu a i{position:absolute;top:0px;right:5px;font-style:normal;}
    a.l-mua,a.l-mua:link,a.l-mua:active,a.l-mua:visited{color:#EEFFFF;}
    a.l-mua:hover{background:#EE8800 url(img/bgmenu.png) repeat-x 0 -90px;color:#FFF6E6;}
    a.l-muan,a.l-muan:link,a.l-muan:active,a.l-muan:visited{background:#33CC66 url(img/bgmenu.png) repeat-x 0 -135px;color:#EEFFEE;}
    a.l-muan:hover{background:#EE8800 url(img/bgmenu.png) repeat-x 0 -90px;color:#FFF6E6;}
    .l-mu ul,.l-mu li{margin:0;padding:0;}
    .l-mu li{list-style:none;float:left;width:167px;overflow:visible;cursor:pointer;}
    ul.l-mul0{height:45px;overflow:visible;}
    ul.l-mul0>li{height:45px;text-align:center;background:#0088EE url(img/bgmenu.png) repeat-x 0 -45px;}
    ul.l-mul0>li:hover{background:#EE8800 url(img/bgmenu.png) repeat-x 0 -90px;}
    ul.l-mul1,ul.l-mul2,ul.l-mul3,ul.l-mul4,ul.l-mul5,ul.l-mul6,ul.l-mul7,ul.l-mul8{width:167px;display:none;}
    ul.l-mul2,ul.l-mul3,ul.l-mul4,ul.l-mul5,ul.l-mul6,ul.l-mul7,ul.l-mul8{margin:-45px 0 0 167px;}
    ul.l-mul1>li,ul.l-mul2>li,ul.l-mul3>li,ul.l-mul4>li,ul.l-mul5>li,ul.l-mul6>li,ul.l-mul7>li,ul.l-mul8>li{height:45px;background-color:#FFF6E6;color:#DD7700;}
    ul.l-mul1>li:hover,ul.l-mul2>li:hover,ul.l-mul3>li:hover,ul.l-mul4>li:hover,ul.l-mul5>li:hover,ul.l-mul6>li:hover,ul.l-mul7>li:hover,ul.l-mul8>li:hover{background-color:#FFDDBB;}
    a.l-mub,a.l-mub:link,a.l-mub:active,a.l-mub:visited{color:#DD7700;}
    a.l-mub:hover{font-weight:bold;background:#EE8800 url(img/bgmenu.png) repeat-x 0 -90px;color:#FFF6E6;}
    ul.l-mul0>li.l-mut:hover>ul,ul.l-mul1>li.l-mut:hover>ul,ul.l-mul2>li.l-mut:hover>ul,ul.l-mul3>li.l-mut:hover>ul ,ul.l-mul4>li.l-mut:hover>ul ,ul.l-mul5>li.l-mut:hover>ul ,ul.l-mul6>li.l-mut:hover>ul ,ul.l-mul7>li.l-mut:hover>ul ,ul.l-mul8>li.l-mut:hover>ul{display:block;}
    </style> 
    </head> 
    <body> 
    <div style=" width:880px; margin-left:auto;margin-right:auto;">



    <div Class="l-mu"> 
    <ul Class="l-mul0"> 
    <li Class="l-mut"> <a Class="l-mua" href="#">主菜单0</a> 
    <ul Class="l-mul1"> 
    <li> <a Class="l-mub" href="#">菜单MENU00</a> </li> 
    <li Class="l-mut"> <a Class="l-mub" href="#">菜单MENU01 <i>&gt;</i></a> 
    <ul Class="l-mul2"> 
    <li Class="l-mut"> <a Class="l-mub" href="#">菜单MENU010 <i>&gt;</i></a> 
    <ul Class="l-mul3"> 
    <li> <a Class="l-mub" href="#">菜单MENU0100</a> </li> 
    <li Class="l-mut"> <a Class="l-mub" href="#">菜单MENU0101 <i>&gt;</i></a> <ul Class="l-mul4"> 
    <li> <a Class="l-mub" href="#">菜单MENU01010</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU01011</a> </li> 
    <li Class="l-mut"> <a Class="l-mub" href="#">菜单MENU01012 <i>&gt;</i></a> <ul Class="l-mul5"> 
    <li> <a Class="l-mub" href="#">菜单MENU010120</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU010121</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU010122</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU010123</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU010124</a> </li> 
    </ul></li> 
    <li> <a Class="l-mub" href="#">菜单MENU01013</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU01014</a> </li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li> <a Class="l-mub" href="#">菜单MENU011</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU012</a> </li> 
    </ul> 
    </li> 
    <li> <a Class="l-mub" href="#">菜单MENU02</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU03</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU04</a> </li> 
    </ul> 
    </li> 
    <li Class="l-mut"> <a Class="l-muan" href="#">主菜单1</a> 
    <ul Class="l-mul1"> 
    <li Class="l-mut"> <a Class="l-mub" href="#">菜单MENU10</a> 
    <ul Class="l-mul2"> 
    <li> <a Class="l-mub" href="#">菜单MENU100</a> </li> 
    <li Class="l-mut"> <a Class="l-mub" href="#">菜单MENU101</a> 
    <ul Class="l-mul3"> 
    <li> <a Class="l-mub" href="#">菜单MENU1010</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU1011</a> </li> 
    </ul> 
    </li> 
    <li> <a Class="l-mub" href="#">菜单MENU102</a> </li> 
    </ul> 
    </li> 
    <li> <a Class="l-mub" href="#">菜单MENU11</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU12</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU13</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU14</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU15</a> </li> 
    </ul> 
    </li> 
    <li Class="l-mut"> <a Class="l-mua" href="#">主菜单2</a> 
    <ul Class="l-mul1"> 
    <li> <a Class="l-mub" href="#">菜单MENU20</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU21</a> </li> 
    </ul> 
    </li> 
    <li Class="l-mut"> <a Class="l-mua" href="#">主菜单3</a> 
    <ul Class="l-mul1"> 
    <li> <a Class="l-mub" href="#">菜单MENU30</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU31</a> </li> 
    <li> <a Class="l-mub" href="#">菜单MENU32</a> </li> 
    </ul> 
    </li> 
    <li> <a Class="l-mua" href="#">主菜单4</a> </li> 
    </ul> 
    </div> 



    </div> 
    </body> 
    </html> 

    MapSiteMapRssGoTop