• 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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>CSS菜单--下拉菜单</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;
    width
    :100px;
    padding
    :3px 5px 0px 5px;
    }

    a:visited
    {
    color
    :#336601;
    text-decoration
    :none;
    float
    :left;
    padding
    :3px 5px 0px 5px;
    width
    :100px;
    }

    a:hover
    {
    color
    :white;
    float
    :left;
    padding
    :3px 3px 0px 20px;
    width
    :88px;
    text-decoration
    :none;
    background-color
    :#539D26;
    }

    a:active
    {
    color
    :white;
    float
    :left;
    padding
    :3px 3px 0px 20px;
    width
    :88px;
    text-decoration
    :none;
    background-color
    :#BD06B4;
    }

    #nav
    {
    width
    :600px;
    height
    :30px;
    border-bottom
    :0px;
    padding
    :0px 5px;
    position
    :absolute;
    z-index
    :1;
    }

    .list
    {
    line-height
    :20px;
    text-align
    :left;
    padding
    :4px;
    font-weight
    :normal;
    }

    .menu1
    {
    width
    :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
    {
    width
    :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">
            
    <href="#">我的CHINAY</a><br />
            
    <href="#">我的首页</a><br />
            
    <href="#">我的日志</a><br />
            
    <href="#">我的日志</a><br />
            
    <href="#">我的相册</a><br />
            
    <href="#">我的收藏</a><br />
        
    </div>
        
    </li>
        
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区

    圈子
        
    <div class="list">
            
    <href="#">我的CHINAY</a><br />
            
    <href="#">我的首页</a><br />
            
    <href="#">我的日志</a><br />
            
    <href="#">我的相册</a><br />
            
    <href="#">我的收藏</a><br />
        
    </div>
        
    </li>
        
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的

    短信    
        
    <div class="list">
            
    <href="#">我的CHINAY</a><br />
            
    <href="#">我的相册</a><br />
            
    <href="#">我的收藏</a><br />
        
    </div>
        
    </li>
        
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户

    管理    
        
    <div class="list">
            
    <href="#">我的CHINAY</a><br />
            
    <href="#">我的首页</a><br />
            
    <href="#">我的日志</a><br />
            
    <href="#">我的相册</a><br />
            
    <href="#">我的收藏</a><br />
            
    <href="#">我的日志</a><br />
            
    <href="#">我的相册</a><br />
            
    <href="#">我的收藏</a><br />
        
    </div>
        
    </li>
        
    </ul>
    </div>

    </body>
    </html>
    源:http://www.becaused.com/article.asp?id=393
  • 相关阅读:
    数据库常用术语
    灾备模式的基本体系架构
    linux下的c++开发
    视图矩阵的推导-opengl应用
    抓包实例
    以软件推动工业进步 -嵌入式学习网站
    web 前端 转盘界面
    web 汇率
    xml
    高性能网站架构设计之缓存篇(4)- 主从复制
  • 原文地址:https://www.cnblogs.com/yiki/p/679924.html
Copyright © 2020-2023  润新知