zoukankan      html  css  js  c++  java
  • CSS 实现样式下拉菜单

    下拉菜单的实现

    脚本:

     1 <script type="text/javascript">
     2         function ShowSub(li) {
     3             var subMenu = li.getElementsByTagName("ul")[0]; ;
     4             subMenu.style.display = "block";
     5         }
     6         function HideSub(li) {
     7             var subMenu = li.getElementsByTagName("ul")[0];
     8             subMenu.style.display = "none";
     9         }
    10     </script>
    View Code

    CSS代码:

    1 *{ margin:0px; padding:0px;}
    2  #menu{ background-color:#eee; 600px; height:40px; margin:0 auto;}
    3  ul{ list-style:none;}
    4  ul li{ line-height:40px; text-align:center; position:relative; float:left; }
    5  a{ text-decoration:none; color:#000; display:block; 90px;}
    6  a:hover{ color:#FFF; background-color:#666;}
    7  ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
    8  ul li ul{90px; position:absolute;display:none; }
    9  ul li:hover ul{display:block;}
    View Code

    页面HTML代码:

     1 <div id="menu">
     2 <ul>
     3   <li><a href="#">首页</a></li>
     4   <li><a href="#">课程预览</a>
     5     <ul>
     6       <li><a href="#">Javascript</a></li>
     7       <li><a href="#">jQuery</a></li>
     8     </ul>
     9   </li>
    10   <li><a href="#">学习管理</a>
    11     <ul>
    12       <li><a href="#">视频学习</a></li>
    13       <li><a href="#">案例学习</a></li>
    14       <li><a href="#">交流平台</a></li>
    15     </ul>
    16   </li>
    17   <li><a href="#">经典案例</a></li>
    18   <li><a href="#">关于我们</a></li>
    19   <li><a href="#">联系我们</a></li>
    20 </ul>
    21 </div> 
    View Code

    代码效果:

  • 相关阅读:
    python全局变量与局部变量
    TCP的三次握手四次挥手
    关于Http的面试题
    HSTS
    关于网络安全攻防知识
    http详解
    python中的f''、b''、u''、r''
    常见SQL Server导入导出数据的几个工具
    chrome浏览器中 F12 功能的简单介绍
    Sqlcmd使用详解
  • 原文地址:https://www.cnblogs.com/wtusoso/p/5859669.html
Copyright © 2011-2022 走看看