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;
    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;
    }
    .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>
    <div style="float:clear">
    kfsfsfsdfsdffffdfdfdfdfdf
    </div>
    </body>
    </html>

  • 相关阅读:
    python之路_django入门项目(老师表)
    python之路_django入门项目(学生表)
    python之路_初识django框架
    python之路_前端基础之Bootstrap JS
    python之路_前端基础之Bootstrap 组件
    python之路_前端基础之Bootstrap CSS
    python之路_登录验证及表格增删改作业
    Spring Boot CLI安装
    Spring Boot 所提供的配置优先级顺序
    Intellij IDEA 14.x 中的Facets和Artifacts的区别
  • 原文地址:https://www.cnblogs.com/zhangsongshan/p/2352648.html
Copyright © 2011-2022 走看看