HTML实现二级导航的制作

源文件在上面。。。

一级导航：

        首先想要做二级导航那必然是要先做完一级导航。

一级导航非常简单，简单分析一下：首先导航是可以点击的所以本身是个a标签其次导航是多个的

所以通常将a标签套在一个列表下的li标签里。

<div class="box">
    <ul>
        <li><img src="images/text1.png" alt=""></li>
        <li><a href="#">师生风采</a></li>
        <li><a href="#">院系展示</a></li>
        <li><a href="#">学院介绍</a></li>
        <li><a href="#">首页</a></li>
     </ul>
</div>

like this。接下来就是添加自己喜欢的样式。

一级导航。。。。过

二级导航：

        例如重庆大学官网

非常经典的二级导航，鼠标移动到一级导航下二级导航显示，离开二级导航隐藏。

最终效果（不咋考虑css哈）

再次简单分析一下：首先思考二级导航也是一个列表应该放在哪？就拿上文的一级导航举例，最大的div标签？

ul标签？li标签？a标签？经过对比不难看出应该将二级导航放在li标签里（因为二级导航跟a标签是平级的所以二级导航应该是一级导航li的儿子、一级导航a标签的孙子）。

like this

<ul id="navigation">
    <li>
        <a href="#">网站首页</a>
        <ul>
             <li><a href="#">1213</a></li>
             <li><a href="#">1213</a></li>
             <li><a href="#">1213</a></li>
        </ul>
    </li>
    <li>
        <a href="#">关于帝博</a>
        <ul>
             <li><a href="#">123</a></li>
             <li><a href="#">2222</a></li>
             <li><a href="#">3333</a></li>
        </ul>
     </li>
     <li>
        <a href="#">产品展示</a>
        <ul>
             <li><a href="#">1333</a></li>
             <li><a href="#">233</a></li>
             <li><a href="#">3333</a></li>
        </ul>
     </li>
<ul>

相信聪明的前端engineer一点问题都没有，接下来就是控制二级导航的显示和隐藏，原理就是当鼠标移动到一级导航上二级导航显示反之隐藏。

CSS实现：

.ul>li:hover li>ul{
    display: inline;
}

JS实现：

let x = document.getElementById('navigation');
let navigation = x.children;

for (let i = 0; i < navigation.length; i++) {
    navigation[i].onmouseover =  function(){
        display(i);
    };
    navigation[i].onmouseleave =  function(){
        no_display(i);
    };
}
function display(i){
    let navigation2 = navigation[i].children;
    navigation2[1].style.display = 'block';
}
function no_display(i){
    let navigation2 = navigation[i].children;
    navigation2[1].style.display = 'none';
}

下机。

---