<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .menu{
        margin:0;
        padding:0;
        list-style:none;
    }
    .menu_item{
        float:left;
        background-color:blue;
    }
    .menu_item:hover{
        background-color:green;
    }
    .menu_item a{
        width:150px;
        text-align:center;
html下拉菜单的制作方法
        padding-top:10px;
        padding-bottom:10px;
        display:block;
        color:white;
    }
    .menu_item img{
        height:38px;
        display:block;
    }
    .menu_item ul{
        position:absolute;
        list-style:none;
        margin:0px;
        padding:0px;
        z-index:99999;
        display:none;
    }
    .menu_item ul li{
        background-color:blue;
    }
    .menu_item ul li:hover{background-color:red;}
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(function () {   
    $('.menu li').hover(
        function () {
            $('ul', this).stop(true,true).slideDown();   
        },
        function () {
            $('ul', this).stop(true,true).slideUp();           
        }
    );
    /*$('.menu li').mouseover(function(){
            $(this).children('ul').show();
            }).mouseout(function(){
            $(this).children('ul').hide();
            });*/
});
</script>
</head>
<body>
<div>
    <ul class="menu">
        <li class="menu_item"><a href="#">menu1</a></li><li class="menu_item"><img src="img/nav-bg.jpg" /></li>
        <li class="menu_item">
            <a href="#">menu1</a>
            <ul>
                <li><a href="#">item1</a></li>
                <li><a href="#">item2</a></li>
                <li><a href="#">item3</a></li>
                <li><a href="#">item4</a></li>
            </ul>
        </li><li class="menu_item"><img src="img/nav-bg.jpg" /></li>
        <li class="menu_item"><a href="#">menu1</a></li><li class="menu_item"><img src="img/nav-bg.jpg" /></li>
        <li class="menu_item"><a href="#">menu1</a></li><li class="menu_item"><img src="img/nav-bg.jpg" /></li>
        <li class="menu_item"><a href="#">menu1</a></li><li class="menu_item"><img src="img/nav-bg.jpg" /></li>
    </ul>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。