简单下拉菜单 

<!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();

});

 

posted @ 2015-08-07 09:03  自由无风  阅读(195)  评论(0)  编辑  收藏  举报