纯CSS级联菜单

    技术2023-03-29  20

    测试浏览器:IE6、IE7、IE8、FF3.0。效果如下: 具体代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml HTML HEAD TITLE New Docu测试浏览器:IE6、IE7、IE8、FF3.0。效果如下:

     

    具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="start" href="http://www.woaicss.com" mce_href="http://www.woaicss.com" title="Home" /> <mce:style type="text/css"><!-- *{margin:0; padding:0;list-style:none;} .nav{margin:50px 0px 0px 100px;width:150px;} .nav a{text-decoration:none;color:#333;font-size:12px;} .nav a:hover {color:#f60;} .nav table {width:100%; border-collapse:collapse;} .nav ul ul{display:none;background:#fff;} .nav li{position:relative; _position:static; float:left; width:100%;cursor:pointer;} .nav a.first,.nav a.second{ position:relative;} .nav li.first{border-bottom:1px solid #ccc;height:20px;line-height:20px;} .nav .first:hover{background:transparent;} .nav .first:hover ul{display:block;position:absolute;left:150px;top:-1px;width:150px;border:1px solid #ccc;border-width:1px 2px 2px 1px;} .nav .first:hover li { border-bottom:none;} .nav .first:hover ul ul{display:none;} .nav .first:hover .first:hover ul{display:block;} /*三级菜单*/ .nav li a span { display:block; padding-right:15px; background:url(http://www.woaicss.com/works/pic/ico.gif) no-repeat right 0;} /*小箭头*/ .nav li a:hover span {background-position:right -15px;} --></mce:style><style type="text/css" mce_bogus="1"> *{margin:0; padding:0;list-style:none;} .nav{margin:50px 0px 0px 100px;width:150px;} .nav a{text-decoration:none;color:#333;font-size:12px;} .nav a:hover {color:#f60;} .nav table {width:100%; border-collapse:collapse;} .nav ul ul{display:none;background:#fff;} .nav li{position:relative; _position:static; float:left; width:100%;cursor:pointer;} .nav a.first,.nav a.second{ position:relative;} .nav li.first{border-bottom:1px solid #ccc;height:20px;line-height:20px;} .nav .first:hover{background:transparent;} .nav .first:hover ul{display:block;position:absolute;left:150px;top:-1px;width:150px;border:1px solid #ccc;border-width:1px 2px 2px 1px;} .nav .first:hover li { border-bottom:none;} .nav .first:hover ul ul{display:none;} .nav .first:hover .first:hover ul{display:block;} /*三级菜单*/ .nav li a span { display:block; padding-right:15px; background:url(http://www.woaicss.com/works/pic/ico.gif) no-repeat right 0;} /*小箭头*/ .nav li a:hover span {background-position:right -15px;}</style> </HEAD> <BODY> <div class="nav"> <ul> <li class="first"> <!--[if IE 6]><a class="first" href=""><table><tr><td><![endif]--> <a href=""><span>第一级菜单1</span></a> <ul> <li class="first"> <!--[if IE 6]><a class="first" href=""><table><tr><td><![endif]--> <a href=""><span>第二级菜单1</span></a> <ul> <li class="first"><a href="">第三级菜单1</a></li> <li class="first"><a href="">第三级菜单2</a></li> <li class="first"><a href="">第三级菜单3</a></li> <li class="first"><a href="">第三级菜单4</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="first"> <a href="">第二级菜单2</a> </li> <li class="first"> <a href="">第二级菜单3</a> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="first"> <!--[if IE 6]><a class="first" href=""><table><tr><td><![endif]--> <a href=""><span>第一级菜单2</span></a> <ul> <li class="first"> <!--[if IE 6]><a class="first" href=""><table><tr><td><![endif]--> <a href=""><span>第二级菜单1</span></a> <ul> <li class="first"><a href="">第三级菜单1</a></li> <li class="first"><a href="">第三级菜单2</a></li> <li class="first"><a href="">第三级菜单3</a></li> <li class="first"><a href="">第三级菜单4</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="first"> <a href="">第二级菜单2</a> </li> <li class="first"> <a href="">第二级菜单3</a> </li> <li class="first"> <a href="">第二级菜单4</a> </li> <li class="first"> <a href="">第二级菜单5</a> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="first"> <a href="">第一级菜单3</a> </li> <li class="first"> <!--[if IE 6]><a class="first" href=""><table><tr><td><![endif]--> <a href=""><span>第一级菜单4</span></a> <ul> <li class="first"> <!--[if IE 6]><a class="first" href=""><table><tr><td><![endif]--> <a href=""><span>第二级菜单1</span></a> <ul> <li class="first"><a href="">第三级菜单1</a> </li> <li class="first"><a href="">第三级菜单2</a> </li> <li class="first"><a href="">第三级菜单3</a> </li> <li class="first"><a href="">第三级菜单4</a> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="first"> <a href="">第二级菜单2</a> </li> <li class="first"> <a href="">第二级菜单3</a> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </BODY> </HTML>

    最新回复(0)