三级导航

Posted 坚持是一种习惯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三级导航相关的知识,希望对你有一定的参考价值。

三级导航

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .qq {
        width:1050px;
        height: 50px;
        border: 1px solid #ccc;
        margin: 120px auto; 

    }
    ul,li {
        list-style: none;
    }
    .qq>ul>li {
        float: left;
        width: 150px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
    .qq ul li a {
        display: block;
        width: 150px;
        height: 50px;
    }
    .qq ul>li>a:link,.qq ul>li>a:visited {
        text-decoration: none;
        background-color: purple;
        color: pink;
    }
    .qq ul li a:hover {
        background-color: orange;
        font-weight: bold;
        color: red;
    }


    .qq ul li ul {
        position: absolute;

    }
    .qq ul li ul li {
        float: none;

    }
    .qq ul li ul li a {
        border-right: none;
        background: #f5f5f5;

    }
    .qq ul li ul{
        position: absolute;
        display: none;

    }
    .qq ul li:hover ul {

        display: block;
    }


    a  {
        text-decoration:none;
        color:blue;}

    .qq ul li {
        margin: 0px auto;
        position:relative;
        width:150px;
        height:50px;
        text-align:center;
        line-height:50px;
        float:left;
        background-color:yellow;
        }
    .qq ul li:hover {
        display:block;
        background-color:pink;
        color:#fff;
        font-size:16px;}
    .qq ul li ul {
        display:none;}
    .qq ul li:hover ul {
        position:absolute;
        display:block;

        top:48px;}

    .qq ul li:hover ul li:hover a {
        display:block;
        color:red;
        background-color:orange;
        font-size:16px;}
    .qq ul li:hover ul li ul {
        display:none;}
    .qq ul li:hover ul li:hover ul {
        display:block;
        position:absolute;
        left:150px;
        top:0;}
    .qq ul li:hover ul li:hover ul li:hover a {
        display:block;
        color:blue;
        background-color:purple;
        font-size:16px;}


</style> 
</head>
<body>
<div class="qq">
    <ul>
        <li><a href="#">个人中心</a>
            <ul>
                <li><a href="#">说说</a>
                    <ul>
                        <li><a href="#">5月</a></li>
                        <li><a href="#">6月</a></li>
                        <li><a href="#">7月</a></li>
                    </ul>
                </li>
                <li><a href="#">相册</a>
                    <ul>
                        <li><a href="#">亲子</a></li>
                        <li><a href="#">旅游</a></li>
                        <li><a href="#">情侣</a></li>
                    </ul>
                </li>
                <li><a href="#">留言</a>
                    <ul>
                        <li><a href="#">表情</a></li>
                        <li><a href="#">字体</a></li>
                        <li><a href="#">背景</a></li>
                    </ul>
                </li>
                <li><a href="#">访客</a>
                    <ul>
                        <li><a href="#">童鑫</a></li>
                        <li><a href="#">熊壮</a></li>
                        <li><a href="#">李润芳</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">日志</a>
            <ul>
                <li><a href="#">日志列表</a>
                    <ul>
                        <li><a href="#">5月</a></li>
                        <li><a href="#">6月</a></li>
                        <li><a href="#">7月</a></li>
                    </ul>
                </li>
                <li><a href="#">写日志</a></li>
                <li><a href="#">返回</a></li>
            </ul>
        </li>
        <li><a href="#">说说</a>
            <ul>
                <li><a href="#">心情</a>
                    <ul>
                        <li><a href="#">高兴</a></li>
                        <li><a href="#">悲伤</a></li>
                        <li><a href="#">忧郁</a></li>
                    </ul>
                </li>
                <li><a href="#">分享</a>
                    <ul>
                        <li><a href="#">微信</a></li>
                        <li><a href="#">微博</a></li>
                        <li><a href="#">腾讯</a></li>
                    </ul>
                </li>
                <li><a href="#">转载</a></li>
            </ul>
        </li>
        <li><a href="#">相册</a>
            <ul>
                <li><a href="#">旅游</a>
                    <ul>
                        <li><a href="#">上海</a></li>
                        <li><a href="#">北京</a></li>
                        <li><a href="#">海南</a></li>
                    </ul>
                </li>
                <li><a href="#">亲子</a>
                    <ul>
                        <li><a href="#">姐妹</a></li>
                        <li><a href="#">家人</a></li>
                        <li><a href="#">姐弟</a></li>
                    </ul>
                </li>
                <li><a href="#">普通</a></li>
                <li><a href="#">情侣</a></li>
            </ul>
        </li>
        <li><a href="#">留言</a>
            <ul>
                <li><a href="#">表情</a>
                    <ul>
                        <li><a href="#">搞笑</a></li>
                        <li><a href="#">情侣</a></li>
                        <li><a href="#">非主流</a></li>
                    </ul>
                </li>
                <li><a href="#">精选文字</a></li>
                <li><a href="#">背景</a>
                    <ul>
                        <li><a href="#">蓝色</a></li>
                        <li><a href="#">紫色</a></li>
                        <li><a href="#">红色</a></li>
                    </ul>
                </li>
                <li><a href="#">字体</a>
                    <ul>
                        <li><a href="#">楷体</a></li>
                        <li><a href="#">宋体</a></li>
                        <li><a href="#">黑体</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">访客</a>
            <ul>
                <li><a href="#">谁看过我</a>
                    <ul>
                        <li><a href="#">童鑫</a></li>
                        <li><a href="#">王辉</a></li>
                        <li><a href="#">姐姐</a></li>
                    </ul>
                </li>
                <li><a href="#">我看过谁</a>
                    <ul>
                        <li><a href="#">李四</a></li>
                        <li><a href="#">张三</a></li>
                        <li><a href="#">童鑫</a></li>
                    </ul>
                </li>
                <li><a href="#">被挡访客</a></li>
            </ul>
        </li>
        <li><a href="#">装扮</a>
            <ul>
                <li><a href="#">浪漫</a></li>
                <li><a href="#">风景</a>
                    <ul>
                        <li><a href="#">碧海蓝天</a></li>
                        <li><a href="#">沙漠</a></li>
                        <li><a href="#">草原</a></li>
                    </ul>
                </li>
                <li><a href="#">美女</a></li>
                <li><a href="#">动物</a>
                    <ul>
                        <li><a href="#">小猫</a></li>
                        <li><a href="#">小狗</a></li>
                        <li><a href="#">小熊</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

以上是关于三级导航的主要内容,如果未能解决你的问题,请参考以下文章

响应式一级到三级导航

PHP Wordpress:第三级导航,一起显示第二级和第三级导航

使用导航从一个片段导航到另一个片段后,防止后按工作

条件片段和导航重用

Android底部导航片段问题

使用 NavController 从片段导航到另一个片段