根据CSS完成的4级往下拉菜单实际效果编码

2020-10-18 20:30 jianzhan

本文案例讲述了根据CSS完成的4级往下拉菜单实际效果编码。共享给大伙儿供大伙儿参照。实际以下:

这是1款根据CSS完成的多级别菜单,1共可往下拉出4级,在撰写此类的CSS菜单时要留意,1级的li,a的hover时,设定2级菜单可见,1级的li,a的hover时,设定2级,3级菜单掩藏,1级和2级的li,a的hover时,设定3级和4级级菜单掩藏,1级2级菜单hover时,设置3级菜单可见,1级2级3级hover时,设定4级菜单可见,编码里已加注了丰富多彩的注解,菜单设计风格假如不合适你口感的话,可自身清理1下。

运作实际效果截图以下:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/css⑷l-fade-out-menu-style-codes/

实际编码以下:


拷贝编码
编码以下:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>CSS 完成4级的往下拉菜单</title>
</head>
<style>
<!--
* {margin:0px;padding:0px;}
body {font-size:12px;font-family:Arial;color:#000;}
a {font-size:12px;font-family:Arial;color:#000;text-decoration:none;}
.menu {position:relative;width:500px;background-color:#360;}
.menu ul {list-style-type:none;}
.menu li { float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:20px;border:1px solid #000;}
.menu ul ul ul{ visibility:hidden; position:absolute; left:122px;top:0px; border:solid 1px #999999;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}
.menu a:hover{background:#690;color:#000;}
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
.menu ul ul li a:hover{background:#690;}
.menu ul ul ul li a{clear:both;text-align:left;}
.menu UL LI:hover UL {VISIBILITY: visible}
.menu UL A:hover UL {
VISIBILITY: visible
/*1级的li,a的hover时,设定2级菜单可见*/
}
.menu UL :hover UL UL {
VISIBILITY: hidden
/*1级的li,a的hover时,设定2级,3级菜单掩藏*/
}
.menu UL :hover UL :hover UL UL {
VISIBILITY: hidden
/*1级和2级的li,a的hover时,设定3级和4级级菜单掩藏*/
}
.menu UL :hover UL :hover UL {
VISIBILITY: visible
/*1级2级菜单hover时,设置3级菜单可见*/
}
.menu UL :hover UL :hover UL :hover UL {
VISIBILITY: visible
/*1级2级3级hover时,设定4级菜单可见*/
}
.menu ul ul ul a{ background:#00CCFF;}
.menu ul ul ul a:hover{ background:#0066FF;}
.menu ul ul ul ul a{ background:#390;}
.menu ul ul ul ul a:hover{ background:#690;}
-->
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">企业主页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">2级菜单_01</a></li>
<li><a href="#">2级菜单_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--第2个菜单刚开始-->
<li><a href="#">企业简介<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">2级菜单_01</a></li>
<li><a href="#">2级菜单_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--完毕-->
<!--3级刚开始-->
<li><a href="#">商品导航栏
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">2级菜单_01</a>
<!--3级子菜单-->
<li><a href="#">2级菜单_02
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">3级菜单_01</a></li>
<li><a href="#">3级菜单_02</a></li>
<li><a href="#">3级菜单_03</a></li>
<li><a href="#">3级菜单_04
<!--4级菜单刚开始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">4级菜单_01</a></li>
<li><a href="#">4级菜单_02</a></li>
<li><a href="#">4级菜单_03</a></li>
<li><a href="#">4级菜单_04</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--4级子菜单完毕-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--3级完毕-->
<!--3级子菜单-->
<li><a href="#">2级菜单_03
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">3级菜单_01</a></li>
<li><a href="#">3级菜单_02</a></li>
<li><a href="#">3级菜单_03</a></li>
<li><a href="#">3级菜单_04
<!--4级菜单刚开始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">4级菜单_01</a></li>
<li><a href="#">4级菜单_02</a></li>
<li><a href="#">4级菜单_03</a></li>
<li><a href="#">4级菜单_04</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--4级子菜单完毕-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--3级完毕-->
</ul>
</body>
</html>

期待本文所述对大伙儿的css网页页面设计方案有一定的协助。