zoukankan      html  css  js  c++  java
  • 超赞的纯CSS实现的简约下拉菜单代码

    代码简介:超赞的纯CSS实现的简约下拉菜单代码

    代码内容:

    <!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>
    		<title>超赞的纯CSS实现的简约下拉菜单代码_网页代码站(www.webdm.cn)</title>
    <style>
    /*Author:5key.net*/
    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="#">我的CHINAY</a><br />
            <a href="#">我的首页</a><br />
            <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="#">我的CHINAY</a><br />
            <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="#">我的CHINAY</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="#">我的CHINAY</a><br />
            <a href="#">我的首页</a><br />
            <a href="#">我的日志</a><br />
            <a href="#">我的相册</a><br />
            <a href="#">我的收藏</a><br />
    		<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/fa7d041d-810d-4c4a-b49e-b534a7a0f84a.html

  • 相关阅读:
    vue2.0阻止事件冒泡
    IconFont 图标制作和使用
    Gulp入门教程
    伪类实现特殊图形,一个span加三角形
    Vue渲染列表,在更新data属性后,列表未更新问题
    理解Array.prototype.slice.call(arguments)
    ;(function(){ //代码})(); 自执行函数开头为什么要加;或者!
    Hexo 搭建博客 本地运行 常见报错及解决办法
    说说JSON和JSONP,也许你会豁然开朗
    数组去重的常用方法
  • 原文地址:https://www.cnblogs.com/webdm/p/2077267.html
Copyright © 2011-2022 走看看