两级联动菜单实例

最新推荐文章于 2021-01-18 21:33:19 发布

ashokawuanshou

最新推荐文章于 2021-01-18 21:33:19 发布

阅读量1.5k

点赞数

分类专栏： CSS 可用性 HTML 文章标签： stylesheet xhtml hp class html 通讯

本文链接：https://blog.csdn.net/ashokawuanshou/article/details/7702786

版权

可用性同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>环境保护局</title>
<link rel="stylesheet" media="all" type="text/css" href="css/menu3.css" />
<link rel="stylesheet" media="all" type="text/css" href="zhpt.css" />
</head>

<body>
<div class="menu">
	<ul>
		<li><a href="index.php" >首页</a></li>
        
        <li><a href="hytz.php" >通知</a></li>   
        
        <li><a href="rwjz.php" >任务</a></li>     

		<li><a href="#">科室</a>
			<ul>
				<li><a href="ks_bgs">办公室</a></li>
				<li><a href="ks_zhk">综合科</a></li>
				<li><a href="ks_glk">管理科</a></li>
				<li><a href="ks_hpk">环评科</a></li>
                <li><a href="ks_jcd">监察队</a></li>
                <li><a href="ks_jcz">监测站</a></li>
                <li><a href="ks_pfz">排放站</a></li>
                <li><a href="ks_fss">辐射所</a></li>
                <li><a href="ks_fwb">服务部</a></li>
			</ul>
        </li>
        
		<li><a href="#">业务</a>
			<ul>
				<li><a href="yw_hp">环评</a></li>
                <li><a href="yw_hp_zl">总量</a></li>
                <li><a href="yw_jp">减排</a></li>
				<li><a href="yw_jcd">监察</a></li>
				<li><a href="yw_jcz">监测</a></li>
				
                <li><a href="yw_xf">信访</a></li>                
			</ul>
        </li>
        
        <li><a href="#">查阅</a>
			<ul>
				<li><a href="cy_txl">通讯录</a></li>
				<li><a href="ing">信访接待</a></li>
				<li><a href="ing">业务须知</a></li>				
                <li><a href="ing">管理制度</a></li>                
			</ul>
        </li>
        
        <li><a href="#">下载</a>
			<ul>
				<li><a href="ing">法律法规</a></li>
				<li><a href="ing">标准规范</a></li>
				<li><a href="ing">上级文件</a></li>
				<li><a href="ing">文书模板</a></li>                                
			</ul>
        </li>    
	
        <li><a href="http://10.220.16.134:8888" target="_blank">地理信息</a></li>
        
        <li><a href="help.php" >帮助</a></li>
        
        <li><a href="#">个人</a>
			<ul>            	
               				
				<li><a href="ing">私信</a></li>
				<li><a href="ing">共享</a></li>
				<li><a href="gr_bwjl">备忘记录</a></li>
                <li><a href="ing">帐户信息</a></li>
                <li><a href="ing">人事信息</a></li>
                <li><a href="gr_ggmm">更改密码</a></li>
                <li><a href="gr_czjl">操作记录</a></li>
                <li><a href="logout">退出</a></li>                
			</ul>
        </li>
	
    </ul>
</div>
</body>
</html>

menu3.css

.menu{ /*主菜单*/
	
	position:relative;
	border:none;
	border:0px;
	margin:auto;
	padding:auto;	
	font-family:宋体,geneva,微软雅黑,helvetica,sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#000;	
	
	
	
}
	
.menu ul{	/*大UL菜单*/
	background:url(gray-menu-bg.gif) top left repeat-x;
	height:43px;
	list-style:none;
	position:relative;
	margin:0;padding:0;
	margin-left:0 auto;
	margin-right:0 auto;
	text-align:center;
	
}


	
.menu li{ /*LI菜单*/
	float:left;
	padding:0px 8px 0px 8px;
	margin:0 auto;
	text-align:center;
	position:relative;
}
	
.menu li a{ /*LI超级链接*/
	color:#000;
	display:block;
	font-weight:bold;
	line-height:43px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
}
	
	
.menu li a:hover{ /*LI超级链接鼠标滑过*/
	color:#de4433;
	text-decoration:none;
}

.menu li ul{ /*LI的子项*/
	background:#EAF2D3;
	border-left:3px solid #003366;/*下拉菜单的边框*/
	border-right:3px solid #003366;
	border-bottom:3px solid #003366;
	display:none;
	height:auto;
	filter:alpha(opacity=95);
	opacity:0.95;
	position:absolute;
	width:100px;/*下拉菜单的宽度需改动两处*/
	z-index:200;
}

.menu li:hover ul{ /*LI的子项滑过*/
	display:block;
}

.menu li li { /*LI的子项*/
	display:block;
	float:none;
	padding:0px;
	width:100px;/*下拉菜单的宽度需改动两处*/
}

.menu li ul a{ /*子项超级链接*/
	display:block;
	font-size:14px;
	font-style:normal;
	padding:0px 10px 0px 15px;
	text-align:left;
}

.menu li ul a:hover{ /*子项超级链接滑过*/
	background:#99ccff;
	color:#de4433;
	opacity:1.0;
	filter:alpha(opacity=100);
}

.menu p{
	clear:left;
}	
	
.menu #current{ /*默认先中项，可不设定*/
	background:url(gray-current-bg.gif) top left repeat-x;
	color:#ffffff;}