导航页下拉菜单 - 码农教程

一、效果图

二、相关知识点

Position 属性

1、static ：默认值没有定位元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。

2、fixed ：相对于浏览器窗口进行定位。通过left top right 以及 bottom 属性进行规定

3、relative ：相对于自身正常位置进行定位。通过left top right 以及 bottom 属性进行规定

4、absolute : 相对于static定位以外的第一个父元素进行定位。元素的位置通过left top right 以及 bottom 属性进行规定

鼠标指针浮动事件

1、css 定义hover选择器：

li:hover>ul{display:block;}

2、JavaScript 定义方法（对象为参数）、事件（调用方法、传入对象）

 <li onmousemove="display1(this)" onmouseout="display2(this)"></li>

3、jQuery 定义对象-事件-方法

$('li').hover(function(){移入},function(){移除});

三、实现方式

1、javascript

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;position:absolute;}
        li{border:solid 1px red;width:100px;line-height:25px;text-align:center;float:left; position:relative;}
        ul>li>ul{top:25px;display:none}
        ul>li>ul>li{border-color:green;}
        ul>li>ul>li>ul{border-color:blue;left:100px;top:0px;display:none;}
        ul>li>ul>li>ul>li{border-color:blue;}
        li:hover>ul{display:block;}

    </style>
</head>
<body>
<ul>
    <li>1.1菜单</li>
    <li onmousemove="display1(this)" onmouseout="display2(this)">1.2菜单
        <ul>
            <li>1.2.1菜单</li>
            <li>1.2.2菜单</li>
            <li onmousemove="display1(this)" onmouseout="display2(this)">1.2.3菜单
                <ul>
                    <li>1.2.3.1菜单</li>
                    <li>1.2.3.2菜单</li>
                    <li>1.2.3.3菜单

                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>1.3菜单</li>
    <li>1.4菜单</li>
    <li>1.5菜单</li>
    <li>1.6菜单</li>
</ul>
<script>
    function display1(liInput){
        var nextUl=liInput.getElementsByTagName("ul")[0];
        nextUl.style.display="block";
    }
    function display2(liInput){
        var nextUl=liInput.getElementsByTagName("ul")[0];
        nextUl.style.display="none";
    }
</script>
</body>
</html>

2、jQuery

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;position:absolute;}
        li{border:solid 1px red;width:100px;line-height:25px;text-align:center;float:left; position:relative;}
        ul>li>ul{top:25px;display:none;}
        ul>li>ul>li{border-color:green;}
        ul>li>ul>li>ul{border-color:blue;left:100px;top:0px;display:none;}
        ul>li>ul>li>ul>li{border-color:blue;}

    </style>
</head>
<body>
<ul>
    <li>1.1菜单</li>
    <li>1.2菜单
        <ul>
            <li>1.2.1菜单</li>
            <li>1.2.2菜单</li>
            <li>1.2.3菜单
                <ul>
                    <li>1.2.3.1菜单</li>
                    <li>1.2.3.2菜单</li>
                    <li>1.2.3.3菜单

                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>1.3菜单</li>
    <li>1.4菜单</li>
    <li>1.5菜单</li>
    <li>1.6菜单</li>
</ul>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('li').hover(function(){
            $(this).find("ul").eq(0).css('display','block');
        },function(){
            $(this).find("ul").eq(0).css('display','none');
        });
    });
</script>

</body>
</html>