Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 导航栏的下拉
Blogger Information
Blog 55
fans 0
comment 0
visits 58990
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
导航栏的下拉
南鸢离梦的博客
Original
697 people have browsed it
  1. <html>
  2.     <head>
  3.         <title>this is a test file</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <style type="text/css">
  6.             #head,#foot{
  7.                 width: 960px;
  8.                 height: 100px;
  9.                 margin: 0px auto;
  10.             }
  11.             body{
  12.                 margin: 0px;
  13.                 padding: 0px;
  14.                 font-size: 14px;
  15.                 font-family: "微软雅黑",Helvetica,arial;
  16.             }
  17.             /**
  18.              * darker:#06a18a;
  19.              * light: #0fb89f;
  20.              */
  22.             div.navbar{
  23.                 background-color:#0fb89f ;
  24.             }
  25.             ul.nav{
  26.                 margin: 0px auto;
  27.                 padding: 0px;
  28.                 list-style: none;
  29.                 width: 960px;
  30.                 height: 40px;
  31.             }
  32.             ul.nav a{
  33.                 text-decoration: none;
  34.                 color: white;
  35.                 display: inline-block;
  36.                 padding: 10px;
  37.                 min-width: 110px;
  38.                 text-align: center;
  39.             }
  40.             ul.nav a:hover{
  41.                 background-color: #06a18a;
  42.             }
  43.             a.active{
  44.                 background-color: #06a18a;
  45.             }
  46.             ul.nav li{
  47.                 float: left;
  48.             }
  49.             ul.nav li ul{
  50.                 margin: 0px auto;
  51.                 padding: 0px;
  52.                 list-style: none;
  53.                 background-color: #06a18a;
  54.                 display: none;
  55.             }
  56.             ul.nav li ul li{
  57.                 float: none;
  58.             }
  59.             ul.nav li ul li a:hover{
  60.                 background-color:#0fb89f ;
  61.             }
  62.         </style>
  63.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  64.     </head>
  65.     <body>
  66.         <div id="head">
  67.         this is head
  68.         </div>
  69.         <div class="navbar">
  70.             <ul class="nav">
  71.             <li>
  72.                 <a href="" class="active">首页</a>
  73.             </li>
  74.             <li>
  75.                 <a href="">中心概况</a>
  76.                 <ul>
  77.                     <li>
  78.                         <a href="">中心简介</a>
  79.                     </li>
  80.                     <li>
  81.                         <a href="">历任领导</a>
  82.                     </li>
  83.                     <li>
  84.                         <a href="">现任领导</a>
  85.                     </li>
  86.                     <li>
  87.                         <a href="">组织架构</a>
  88.                     </li>
  89.                 </ul>
  90.             </li>
  91.             <li>
  92.                 <a href="">新闻公告</a>
  93.                 <ul>
  94.                     <li>
  95.                         <a href="">集团要闻</a>
  96.                     </li>
  97.                     <li>
  98.                         <a href="">综合新闻</a>
  99.                     </li>
  100.                     <li>
  101.                         <a href="">通知公告</a>
  102.                     </li>
  103.                     <li>
  104.                         <a href="">媒体关注</a>
  105.                     </li>
  106.                 </ul>
  107.             </li>
  108.             <li>
  109.                 <a href="">经营发展</a>
  110.             </li>
  111.             <li>
  112.                 <a href="">社会责任</a>
  113.             </li>
  114.             <li>
  115.                 <a href="">企业文化</a>
  116.             </li>
  117.             <li>
  118.                 <a href="">专项工作</a>
  119.             </li>
  120.             <li>
  121.                 <a href="">投资者关系</a>
  122.             </li>
  123.         </ul>
  124.         </div>
  126.         <div id="foot">
  128.         </div>
  129.     </body>
  130.     <script type="text/javascript">
  131.         $(document).ready(function(){
  132.             $("ul.nav").children().hover(function() {
  133.               if($(this).find("li").length > 0){
  134.                 $(this).children("ul").stop(true, true).slideDown(100)
  135.               }
  136.             },function() {
  137.               $(this).children("ul").stop(true, true).slideUp("fast");
  138.             });
  139.             $("ul.nav ul").hover(function(){
  140.                 $(this).prev().addClass("active");
  141.             },function(){
  142.                 $(this).prev().removeClass("active");
  143.             })
  144.         });
  145.     </script>
  146. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post