标签：不弄 再布 float li ul horizental 导航条 display css
|
<ul class="horizental">
<li>4<ul>
<li>2</li>
<li>5<ul>
<li>6</li>
<li>7</li>
</ul></li>
<li>2</li>
<li>2</li>
</ul></li>
<li><span>3</span></li>
<li>1</li>
<li>1</li>
</ul>
|
.horizental li{
margin:0 2px;
list-style-type:none;
}
*{
}
ul li{
padding:0 0;
margin:0 0;
}
.horizental li{
float:left;
display:block;
width: 50px;
}
.horizental li>ul{
display:none;
background-color:green;
}
.horizental ul li{
border: 1px solid red;
}
.horizental li:hover>ul{
display:block;
}
|
|
|
这个行为主要还是 li>ul 每一层下的ul都是hidden的,而hover下,只显示当前层下第一级ul,这样就是效果了.
根直属第一层是float:left; 达到水平的效果.
|
标签：不弄,
再布,
float,
li,
ul,
horizental,
导航条,
display,
css
From： https://www.cnblogs.com/hualiu0/p/18671887