为了账号安全,请及时绑定邮箱和手机立即绑定

为什么hover设置给.nav-li就能显示二级菜单,而设置给tit就不行

/ 猿问

为什么hover设置给.nav-li就能显示二级菜单,而设置给tit就不行

凤求凰Idiot 2018-11-25 11:02:21

为什么hover设置给.nav-li就能显示二级菜单,而设置给tit就不行,而且二级菜单都是一个class类,hover怎么知道显示的是哪个一级菜单下的二级菜单,如果这样写,不应该是当鼠标移到一个1级菜单下时,所有的二级菜单都应该被显示吗



<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

    * {

        padding: 0;

        margin: 0;

    }


    .page {

        width: 100%;

        height: 4043px;

        background: url("mooc.png") center top no-repeat;

    }


    .nav {

        width: 160px;

        height: 205px;

        position: fixed;

        left: 0;

        top: 50%;

        margin-top: -103px;

        font-family: 'Miscrosoft YaHei';

    }


    .nav-li {

        width: 160px;

        height: auto;

        border-bottom: 1px solid #FFF;

        background: #333;

        text-align: center;

        line-height: 40px;

        color: #FFF;

        font-size: 16px;

        cursor: pointer;

    }


    .tit {

        width: 160px;

        height: 40px;

    }


    .tit:hover ul {

        display: block;

    }


    .nav-li ul {

        width: 160px;

        height: auto;

        background: #FFF;

        display: none;

    }


    .nav-li ul li {

        width: 160px;

        height: 40px;

        border-bottom: 1px dashed #666;

        color: #333;

        text-align: center;

        line-height: 40px;

        position: relative;

    }


    .nav-li ul li:hover .list-3 {

        display: block;

    }


    .list-3 {

        width: 160px;

        height: auto;

        position: absolute;

        left: 160px;

        top: 0px;

        display: none;

    }


    .list-3Dom {

        width: 160px;

        height: 40px;

        background: #444;

        border-bottom: 1px solid #FFF;

        text-align: center;

        line-height: 40px;

        color: #FFF;

    }

    </style>

</head>


<body>

    <div class="page">

        <div class="nav">

            <div class="nav-li">

                <div class="tit">慕课网的标题</div>

                <ul>

                    <li>

                        二级栏目

                        <div class="list-3">

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                        </div>

                    </li>

                    <li>

                        二级栏目

                        <div class="list-3">

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                        </div>

                    </li>

                    <li>

                        二级栏目

                        <div class="list-3">

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="nav-li">

                <div class="tit">慕课网的标题</div>

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

            <div class="nav-li">

                <div class="tit">慕课网的标题</div>

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

            <div class="nav-li">

                <div class="tit">慕课网的标题</div>

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

            <div class="nav-li">

                <div class="tit">慕课网的标题</div>

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

        </div>

    </div>

</body>


</html>


查看完整描述

1 回答

?
奋斗好青年

首页你要理解hover的含义先,hover样式写肯定是对于下一层,因为你的tit跟二级菜单是同级的关系,用css去写hover肯定是实现不了的,如果你一定要tit可以借助js去写呀

查看完整回答
反对 回复 2018-12-01

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信