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

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <style>
    
        nav a {
            text-decoration: none;
        }
        nav > ul > li {
            float: left;
            text-align: center;
            padding: 0 0.5em;
        }
    
        nav li ul.sub-menu {
            display: none;
            padding-left: 0 !important;
        }
    
        .sub-menu li {
            color: white;
        }
    
        .sub-menu li:hover {
            background-color: black;
        }
    
        .sub-menu li:hover a {
            color: white;
        }
    
        ul {
            list-style: none;
        }
    </style>
    </head>
    <body>
        <nav>
        <ul>
            <li><a href="#">Home
            <ul class="sub-menu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
            </ul>
            </li>
            <li><a href="#">Programming
            <ul class="sub-menu">
            <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
            </ul>
            </li>
            <li><a href="#">Japanese
            <ul class="sub-menu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
            </ul>
            </li>        
        </ul>
        </nav>
    </body>
    <script type="text/javascript">
        $(document).ready(function() {
            $('nav li').hover(function() {
                $(this).find('.sub-menu').css('display', 'block');
            }, function() {
                $(this).find('.sub-menu').css('display', 'none');
            });
        });
    </script>
    </html>

     下面这样也可以

    $(document).ready(function(){
        
        //导航
        $("#nav ul li").hover(function(){
            $(this).addClass('hover');
            $(this).find("ul").show();//鼠标滑过查找li下面的第一个ul然后显示;
        },function(){
            $(this).removeClass('hover');
            $(this).find("ul").hide();//鼠标离开隐藏li下面的ul;
        })
        
        showtime();
    
    });
  • 相关阅读:
    C/C++程序内存泄漏检测
    linux下的内存管理
    Linker Script 链接器脚本
    linux内核进程调度以及定时器实现机制
    嵌入式软件设计中查找缺陷的几个技巧
    winCE DEBUGZONE
    程序员三个境界
    EJB初识(通熟易懂)
    JVM/JDK/JRE/IDE—区别(很经典)
    dubbo初识(一)Dubbo架构设计详解
  • 原文地址:https://www.cnblogs.com/zywf/p/4709774.html
Copyright © 2011-2022 走看看