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

    创建下拉菜单:

      <style>
       *{
        margin: 0px;
        padding: 0px;
        list-style: none;
       }
       #nav-banner{
        border-radius: 10px;         /*所有边框*/
         500px;
        height: 50px;
        background-color: aqua;
       }
       .nav-i{
        border-radius: 10px;
         100px;
        max-height: 50px;
        float: left;
        text-align: center;
        line-height: 50px;
        overflow: hidden; /*超出部分隐藏*/
       }
       .nav-i:hover{
        border-radius: 10px;
        background-color: antiquewhite;
        cursor: pointer;
        max-height: 500px;
        transition: 0.5s;/*动画*/
       }
       .nav-i:li{
        opacity: 0.5 ;
       }
      
       .nav-ii li{
        border-radius: 10px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #ADD8E6;
       }
       .nav-ii li:hover{
        border-radius: 10px;
        background-color: antiquewhite;
        cursor: pointer;
       }
      </style>
     </head>
     <body>
      <div id="nav-banner">
       <div class="nav-i">首页</div>
       <div class="nav-i">公司简介
        <ul class="nav-ii">
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
        </ul>
       </div>
       <div class="nav-i">产品展示
       <ul class="nav-ii">
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
        </ul></div>
       <div class="nav-i">合作伙伴
       <ul class="nav-ii">
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
        </ul></div>
       <div class="nav-i">联系方式
       <ul class="nav-ii">
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
         <li>aaaaaaaa</li>
        </ul></div>
      </div>
      <div style="position: absolute;">1233466556623323</div>
     </body>
    </html>

  • 相关阅读:
    有关 JavaScript 的 10 件让人费解的事情
    Apache ab介绍1
    Oracle Raw,number,varchar2... 转换
    Flex开发者需要知道的10件事
    linux命令之nice
    JavaIO复习和目录文件的复制
    使用php获取网页内容
    linux 安装sysstat使用iostat、mpstat、sar、sa
    SQL Injection 实战某基金
    ubuntu root锁屏工具
  • 原文地址:https://www.cnblogs.com/hljj/p/6767367.html
Copyright © 2011-2022 走看看