<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>