好久不弄css导航条,这里再布一下
calochCN
·
2025-01-14
·
via 博客园 - calochCN
|
<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; 达到水平的效果.
|
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
