• CSS绿色二级下拉菜单代码


    代码简介:

    配色很舒服的纯CSS二级下拉菜单,没有用到JS,全部是CSS代码,拷贝即可使用,你可以根据自己的需要升级改造,还是很值得借鉴的。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a 
    
    href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
    
    target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>CSS绿色二级下拉菜单代码_网页代码站(www.webdm.cn)</title>
    <style>
    body{
    	background-color:white;
    	font-size:12px;
    	font-family:Arial, Helvetica, sans-serif;
    	margin:0px;
    	padding:0px;
    	color:white;
    }
    ul,li{
    	margin:0px;
    	padding:0px;
    }
    li{
    	display:inline;
    	list-style:none;
    	list-style-position:outside;
    	text-align:center;
    	font-weight:bold;
    	float:left;
    }
    a:link{
    	color:#336601;
    	text-decoration:none;
    	float:left;
    	100px;
    	padding:3px 5px 0px 5px;
    }
    a:visited{
    	color:#336601;
    	text-decoration:none;
    	float:left;
    	padding:3px 5px 0px 5px;
    	100px;
    }
    a:hover{
    	color:white;
    	float:left;
    	padding:3px 3px 0px 20px;
    	88px;
    	text-decoration:none;
    	background-color:#539D26;
    }
    a:active{
    	color:white;
    	float:left;
    	padding:3px 3px 0px 20px;
    	88px;
    	text-decoration:none;
    	background-color:#BD06B4;
    }
    #nav{
    	600px;
    	height:30px;
    	border-bottom:0px;
    	padding:0px 5px;
    	position:absolute;
    	z-index:1;
    	left: 198px;
    	top: 25px;
    }
    .list{
    	line-height:20px;
    	text-align:left;
    	padding:4px;
    	font-weight:normal;
    }
    .menu1{
    	120px;
    	height:auto;
    	margin:6px 4px 0px 0px;
    	border:1px solid #9CDD75;
    	background-color:#F1FBEC;
    	color:#336601;
    	padding:6px 0px 0px 0px;
    	cursor:hand;
    	overflow-y:hidden;
    	filter:Alpha(opacity=70);
    	-moz-opacity:0.7;
    }
    .menu2{
    	120px;
    	height:18px;
    	margin:6px 4px 0px 0px;
    	background-color:#F5F5F5;
    	color:#999999;
    	border:1px solid #EEE8DD;
    	padding:6px 0px 0px 0px;
    	overflow-y:hidden;
    	cursor:hand;
    }
    </style>
    </head>
    
    <body>
    <div id="nav">
    	<ul>
    	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">网站
    
    首页<div class="list">
    		<a href="/">代码下载</a><br />
            <a href="#">我的博客</a><br />
            <a href="#">我的日志</a><br />
            <a href="#">我的音乐</a><br />
    	</div>
    	</li>
    	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区
    
    圈子
    	<div class="list">
    	<a href="/jscss//">.NET圈子</a><br />
            <a href="#">PHP圈子</a><br />
            <a href="#">ASP圈子</a><br />
            <a href="#">JAVA圈子</a><br />
    	</div>
    	</li>
    	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">论坛
    
    导航
    	<div class="list">
    		<a href="#">论坛首页</a><br />
            <a href="#">技术论坛</a><br />
            <a href="#">图片论坛</a><br />
    	</div>
    	</li>
    	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户
    
    管理
    	<div class="list">
            <a href="#">我的帐号</a><br />
            <a href="#">余额转移</a><br />
            <a href="#">我的地盘</a><br />
    	</div>
    	</li>
    	</ul>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码
    
    !</p>
    

    代码来自:http://www.webdm.cn/webcode/b1784f8f-5425-4f0c-8d10-0f16bd0ae96a.html

  • 相关阅读:
    VUE(vue对象的简单属性)
    使用Dockerfile封装Django镜像
    Django路由小知识
    字符编码小知识
    python值的引用传递和go语言的值传递
    centos输入正确的账号和密码登陆不进去
    迅为4412开发平台Zigbee模块在物联网智能家居中的应用
    全新升级4412开发板项目学习实战资料
    迅为4418开发板平台应用于智能门禁系统
    【分享】iTOP-iMX6UL开发板驱动看门狗 watchdog 以及 Linux-c 测试例程
  • 原文地址:https://www.cnblogs.com/webdm/p/2028892.html
Copyright © 2020-2023  润新知