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
  • 相关阅读:
    android测试 adb命令、Monkey命令
    appium工作原理及启动方式
    python中自动化测试框架unittest
    python读取execl数据文件
    LeetCode#110 Balanced Binary Tree
    LeetCode#111 Minimum Depth of Binary Tree
    LeetCode#112 Path Sum
    数据链路层对应的子层
    数据链路层设备
    介质访问控制
  • 原文地址:https://www.cnblogs.com/yiki/p/679924.html
Copyright © 2011-2022 走看看