标签：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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。