三级下拉菜单作业

Original 2019-01-06 17:35:12 212
abstract:<!DOCTYPE html> <html> <head>    <title>           </title>     <script type=
<!DOCTYPE html>
<html>
<head>
   <title>
      
   </title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .nav {
            width: 200px;
            height: 300px;
            margin: 20px 0 0 100px;
            border: 1px solid #ff5000;
        }
        ul {
            list-style: none;
        }
        .one li {
            height: 20px;
            cursor: pointer;
            padding: 10px 20px ;
            margin: 20px 0;
        }
        .one li:hover {
            background: #ffe4dc;
            color: #ff502a;
        }
        .two {
            position: relative;
            left: 181px;
            top: -30px;
            border: 1px solid #ff5000;
        }
        .two>li {
            font-weight: 700;
        }
        .three {
            width: 200px;
            position: absolute;
            left: 159px;
            top: 0px;
            border: 1px solid #ff5000;
        }
    </style>
    <script>
        $(document).ready(function(){
            $('.two').hide()
            $('.three').hide()

            $('.one>li').mousemove(function(){
                $(this).find('.two').show(500)
            })

            $('.one>li').mouseleave(function(){
                $(this).find('.two').hide(500)
            })
            $('.two>li').mousemove(function(){
                $(this).find('.three').show(500)
            })

            $('.two>li').mouseleave(function(){
                $(this).find('.three').hide(500)
            })
        })
    </script>
</head>
<body>
<div class="nav">
    <ul class="one">
        <li>女装/男装/内衣
            <ul class="two">
                <li>女装
                    <ul class="three">
                        <li>冬上新</li>
                        <li>毛呢外套</li>
                        <li>羽绒服</li>
                    </ul>
                </li>
                <li>男装</li>
                <li>内衣</li>
            </ul>
        </li>
        <li>鞋靴/箱包/配件
            <ul class="two">
                <li>鞋靴</li>
                <li>箱包</li>
                <li>配件</li>
            </ul></li>
        <li>童装玩具/孕产/用品
            <ul class="two">
                <li>童装玩具</li>
                <li>孕产</li>
                <li>用品</li>
            </ul></li>
        <li>家电/数码/手机
            <ul class="two">
                <li>家电</li>
                <li>数码</li>
                <li>手机</li>
            </ul></li>
        <li>美妆/洗护/保健品
            <ul class="two">
                <li>美妆</li>
                <li>洗护</li>
                <li>保健品</li>
            </ul></li>
    </ul>
</div>
</body>
</html>

老师,我的>增对当前元素下的某元素没有生效啊,他增对的还是当前元素下的所有指定元素

Correcting teacher:灭绝师太Correction time:2019-01-06 17:40:01
Teacher's summary:不可能的,你要看>它下面的元素是不是同一级,不是同一级就不会

Release Notes

Popular Entries