zoukankan      html  css  js  c++  java
  • 下拉菜单

      下拉菜单,纯css样式的:

    <style>

    *{

    margin:0px;

    padding:0px;

    }

    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;

    left: 198px;

    top: 25px;

    }

    .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:pointer;

    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:pointer;

    }

    </style>

    <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>

      

    </body>

    <div id="daohanglan">

  • 相关阅读:
    查找并拷贝目录中指定文件到某个文件夹
    TPS和QPS的概念
    50道 Redis常见面试题,干货汇总
    面试题:写一个死锁示例
    MySQL聚集索引与辅助索引的区别
    Java进阶知识点:接口幂等性
    测试网络联接状况常用命令 ping 使用方法介绍
    服务路由、负载均衡和服务配置中心的基本概念
    利用堆排序和分治法求解千万级数据排序的Top K问题—百度面试
    创建Spring Boot项目时,提示 Cannot download 'https://start.spring.io'
  • 原文地址:https://www.cnblogs.com/liuyubin0629/p/6940364.html
Copyright © 2011-2022 走看看