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>

  • 相关阅读:
    TFS 服务器更换后工作区无法绑定
    导出你的GAC Assembly中的DLLS
    MICROSOFT REPORT VIEWER 2012之无法加载相关的dll
    查询可用的Nuget服务地址
    认识k_BackingField【转】
    EntityFramework 中生成的类加注释
    Bat命令知识[转]
    利用bat批量执行脚本文件
    SQL Server 2012 LocalDB 管理之旅
    【转】Windows环境下.NET 操作Oracle问题
  • 原文地址:https://www.cnblogs.com/zhangsongshan/p/2352648.html
Copyright © 2011-2022 走看看