zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Magical系列软件产品项目启动了
    IT从业者的学习规划 学习者系列文章开篇
    软件项目角色指南开篇
    使用CSS定位页面的“footer”
    项目管理知识体系指南【3】项目生命期与组织
    读书感受 软件设计师 你必须知道的.NET (C#类型存储方式分析)
    软件外包及其项目管理分析
    项目管理知识体系指南【1】开篇
    项目管理知识体系指南【4】单个项目管理过程
    软件设计师之路【1】开篇
  • 原文地址:https://www.cnblogs.com/yiki/p/679924.html
Copyright © 2011-2022 走看看