zoukankan      html  css  js  c++  java
  • 纯css导航菜单效果

    <!DOCTYPE">
    <html>
    <head>
    <title>导航菜单-下拉</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    .nav,.nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    background-color:#8bd400;
    border:1px solid #486b02;
    float:left;
    }
    .nav li{
    float:left;
    150px;
    background-color:#8bd400;
    }
    .nav li ul{
    150px;
    position:absolute;
    left:-99999px;
    }
    .nav a{
    display:block;
    color:#2b3f00;
    text-decoration:none;
    border-right:1px solid #486b02;
    border-left:1px solid #e4ffd3;
    padding:5px 10px;
    }
    .nav li li{
    float:none;
    }
    .nav li li a{
    border-top:1px solid #e4fd3;
    border-bottom:1px solid #486b02;
    border-left:0;
    border-right:0;
    }
    .nav li:last-child a{
    border-right:0;
    border-bottom:0;
    }
    ul a:hover{
    color:#e4ffd3;
    background-color:#6da203;
    }
    .nav li:hover ul{
    left:auto;
    }
    </style>
    </head>

    <body>
    <ul class="nav">
    <li><a href="1.html">首页</a></li>
    <li><a href="1.html">产品中心</a>
    <ul>
    <li><a href="1.html">产品1</a><li>
    <li><a href="1.html">产品2</a><li>
    <li><a href="1.html">产品3</a><li>
    <li><a href="1.html">产品4</a><li>
    </ul>
    </li>
    <li><a href="1.html">新闻动态</a>
    <ul>
    <li><a href="1.html">新闻1</a><li>
    <li><a href="1.html">新闻2</a><li>
    <li><a href="1.html">新闻3</a><li>
    <li><a href="1.html">新闻4</a><li>
    </ul>
    </li>
    <li><a href="1.html">联系我们</a></li>
    <li><a href="1.html">关于</a></li>
    </ul>
    </body>
    </html>

  • 相关阅读:
    SQL语句大全
    SQL SERVER 用sql语句将一列数据拼接成一个字符串
    常用 SQl 语句大全
    巧用一条SQL语句实现其它进制到十进制转换
    sql 2005
    sql convert(varchar(10),getdate(),120)
    sqlserver 日期函数
    转:DBCC CHECKDB 数据库或表修复
    Linux下使用SFTP命令
    mySQL 教程 第7章 存储过程和函数
  • 原文地址:https://www.cnblogs.com/---cc/p/3748951.html
Copyright © 2011-2022 走看看