ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue菜单导航

2021-09-22 15:02:40  阅读:32  来源: 互联网

标签:box vue li ul 菜单 background 0px 导航


<template>
    <div>
<div class="box">
    <ul>
        <li><a href="#">导航1</a>
            <ul>
                <li><a href="#" class="sech">导航1_1</a></li>
                <li><a href="#">导航1_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航1_2_1</a></li>
                        <li><a href="#">导航1_2_2</a></li>
                        <li><a href="#">导航1_2_3</a></li>
                        <li><a href="#">导航1_2_4</a></li>
                    </ul>
                </li>
                <li><a href="#">导航1_3</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航1_3_1</a></li>
                        <li><a href="#">导航1_3_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航1_4</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航1_4_1</a></li>
                        <li><a href="#">导航1_4_2</a></li>
                        <li><a href="#">导航1_4_3</a></li>
                        <li><a href="#">导航1_4_4</a></li>
                        <li><a href="#">导航1_4_5</a></li>
                        <li><a href="#">导航1_4_6</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">导航2</a>
            <ul>
                <li><a href="#" class="sech">导航2_1</a></li>
                <li><a href="#">导航2_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航2_2_1</a></li>
                        <li><a href="#">导航2_2_2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">导航3</a>
            <ul>
                <li><a href="#" class="sech">导航3_1</a></li>
                <li><a href="#">导航3_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航3_2_1</a></li>
                        <li><a href="#">导航3_2_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航3_3</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航3_3_1</a></li>
                        <li><a href="#">导航3_3_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航3_4</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航3_4_1</a></li>
                        <li><a href="#">导航3_4_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航3_5</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航3_5_1</a></li>
                        <li><a href="#">导航3_5_2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">导航4</a>
            <ul>
                <li><a href="#" class="sech">导航4_1</a></li>
                <li><a href="#">导航4_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航4_2_1</a></li>
                        <li><a href="#">导航4_2_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航4_3</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航4_3_1</a></li>
                        <li><a href="#">导航4_3_2</a></li>
                        <li><a href="#">导航4_3_3</a></li>
                    </ul>
                </li>
                <li><a href="#">导航4_4</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航4_4_1</a></li>
                        <li><a href="#">导航4_4_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航4_5</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航4_5_1</a></li>
                        <li><a href="#">导航4_5_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航4_6</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航4_6_1</a></li>
                        <li><a href="#">导航4_6_2</a></li>
                        <li><a href="#">导航4_6_3</a></li>
                        <li><a href="#">导航4_6_4</a></li>
                        <li><a href="#">导航4_6_5</a></li>
                    </ul>
                </li>
                <li><a href="#">导航4_7</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航4_7_1</a></li>
                        <li><a href="#">导航4_7_2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">导航5</a>
            <ul>
                <li><a href="#" class="sech">导航5_1</a></li>
                <li><a href="#">导航5_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航5_2_1</a></li>
                        <li><a href="#">导航5_2_2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/dll">导航6</a>
            <ul>
                <li><a href="#" class="sech">导航6_1</a></li>
                <li><a href="#">导航6_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航6_2_1</a></li>
                        <li><a href="#">导航6_2_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航6_3</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航6_3_1</a></li>
                        <li><a href="#">导航6_3_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航6_4</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航6_4_1</a></li>
                        <li><a href="#">导航6_4_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航6_5</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航6_5_1</a></li>
                        <li><a href="#">导航6_5_2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">导航7</a>
            <ul>
                <li><a href="#" class="sech">导航7_1</a></li>
                <li><a href="#">导航7_2</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航7_2_1</a></li>
                        <li><a href="#">导航7_2_2</a></li>
                    </ul>
                </li>
                <li><a href="#">导航7_3</a>
                    <ul>
                        <li><a href="#" class="thirdh">导航7_3_1</a></li>
                        <li><a href="#">导航7_3_2</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>
</div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
 body {
	margin:0px;
	padding:0px;
	font-family:Verdana,Geneva,sans-serif;
	font-size:12px;
	color:#FFF;
	background-color:#434343
}
body a {
	color:#000000;
}
.box {
	padding:0px;
	width:2000px;
}
.box ul {
	margin:0px;
	padding:0px;
	list-style:none;
	border:0;
}
.box ul li {
	float:left;
	position:relative;
	padding:0px;
	display:block;
	border-radius:0px;
	box-shadow:#000 0px 0px 1px;
	border:0;
	background-color:#F3F3F3;
}
.box ul li:hover ul {
	display:block;
}
.box ul li a {
	font-size:14px;
	padding:5px;
	display:block;
	text-decoration:none;
	border-right:1px solid #999;
}
.box ul li ul {
	display:none;
	position:absolute;
	left:0px;
}
.box ul li ul li {
	width:120px;
	margin:0px 0px 2px 0px;
	padding:0px;
	background-color:#ddd;
}
.box>ul>li:hover {
	background-color:#1E90FF;
}
.box ul li ul li:hover {
	background:pink;
}
.box ul li ul li:hover ul {
	visibility:visible;
}
.box ul li ul li ul {
	visibility:hidden;
	position:absolute;
	top:0px;
	left:121px;
}
.box ul li ul li ul li {
	background:#FFFFFF;
}
.box ul li ul li ul li:hover {
	background:#AFEEEE;
}

</style>

标签:box,vue,li,ul,菜单,background,0px,导航
来源: https://blog.csdn.net/weixin_44040867/article/details/120414956

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有