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();
    
    });
  • 相关阅读:
    python的paramiko模块简单应用
    python单线程下实现多个socket并发
    python之协程
    python之生产者消费者模型
    python进程之间修改数据[Manager]与进程池[Pool]
    python的进程间的数据交互
    vmware搭建vSAN提示磁盘不合格或者看不到磁盘的解决办法
    python之多并发socket
    OOP的几个不常用的方法
    HTTP 头和 PHP header() 函数
  • 原文地址:https://www.cnblogs.com/zywf/p/4709774.html
Copyright © 2011-2022 走看看