我想用ul
和li
建立一个嵌套导航,它也可以有子项目。
当父级li
上有ative
类时,子项应出现在下一行(该类用javascript设置为onclick)。
只有当子列表有position: absolut
时,我才设法做到这一点。不幸的是,它会重叠以下内容。
这是它的样子:
我真的很想这样做,而不必使用position: absolut
,但想不出办法。
谁能帮我?
按照我的代码。
ul {
list-style: none;
padding: 0;
position: relative
}
li {
display: inline-block;
border: 1px solid deeppink;
margin: 5px 5px 0 5px;
}
ul ul {
position: absolute;
display: none;
left: 0;
}
ul ul li {
border: 0;
border-bottom: 1px solid black;
}
ul li.isActive {
background-color: yellow;
}
ul li.isActive ul {
display: block;
}
span {
padding: 5px;
}
<ul>
<li>
<span>top1</span>
</li>
<li class="isActive">
<span>top2</span>
<ul>
<li>
<span>sub1</span>
</li>
<li>
<span>sub2</span>
</li>
</ul>
</li>
<li>
<span>top3</span>
<ul>
<li>
<span>other sub1</span>
</li>
<li>
<span>other sub2</span>
</li>
</ul>
</li>
</ul>
<span>
Some text.
</span>
不是最动态的方式或非常可扩展但你可以使用focus伪,你不需要使用JavaScript作为活动,你不想再使用我从你的评论中看到的JS。 JSFiddle在这里看到它在行动https://jsfiddle.net/Le64we9s/1/
样式:
.clear{
clear:both;
}
.content{
margin-top:10px;
}
.main-link, .sub-link{
color:#fff;
text-decoration:none;
padding:5px;
display:inline-block;
background:#2489f1;
}
.sub-link{
background:#1d6dbf;
display:none;
margin-top:10px;
}
.main-link:focus{
background:#65b1ff;
}
.main-link-1:focus ~ .sub-link-1, .main-link-2:focus ~ .sub-link-2, .main-link-3:focus ~ .sub-link-3, .main-link-4:focus ~ .sub-link-4{
display:inline-block;
}
每次添加新的主菜单选项卡和子菜单时,都必须添加.main-link-(number here):focus ~ .sub-link-(same number here)
。
HTML:
<div>
<a href="#" class="main-link main-link-1">Main 1</a>
<a href="#" class="main-link main-link-2">Main 2</a>
<a href="#" class="main-link main-link-3">Main 3</a>
<a href="#" class="main-link main-link-4">Main 4</a>
<div class="clear"></div>
<a href="#" class="sub-link sub-link-1">Sub Menu 1</a>
<a href="#" class="sub-link sub-link-1">Sub Main 1</a>
<a href="#" class="sub-link sub-link-1">Sub Main 1</a>
<a href="#" class="sub-link sub-link-1">Sub Main 1</a>
<a href="#" class="sub-link sub-link-2">Sub Menu 2</a>
<a href="#" class="sub-link sub-link-2">Sub Main 2</a>
<a href="#" class="sub-link sub-link-2">Sub Main 2</a>
<a href="#" class="sub-link sub-link-2">Sub Main 2</a>
<a href="#" class="sub-link sub-link-3">Sub Menu 3</a>
<a href="#" class="sub-link sub-link-3">Sub Main 3</a>
<a href="#" class="sub-link sub-link-3">Sub Main 3</a>
<a href="#" class="sub-link sub-link-3">Sub Main 3</a>
<a href="#" class="sub-link sub-link-4">Sub Menu 4</a>
<a href="#" class="sub-link sub-link-4">Sub Main 4</a>
<a href="#" class="sub-link sub-link-4">Sub Main 4</a>
<a href="#" class="sub-link sub-link-4">Sub Main 4</a>
</div>
<div class="content">
content here
</div>
您需要使用焦点伪标签才能工作。
检查一下并相应地修改它。我没有使用position:absolute
ul > li{
float:left;
margin-left:20px;
list-style:none;
}
ul > li > span{
border:1px solid red;
display:block;
width:50px;
}
.sub{ margin-left:-132px;margin-top:5px; }
.sub > li{
float:left;
margin-left:20px;
border:1px solid red;
visibility:hidden;
}
ul > li:hover .sub > li{
visibility:visible;
}
#txt{
margin-left:60px;
clear:both;
}
<div class="menu">
<ul>
<li><span>top 1</span></li>
<li><span>top 2</span>
<ul class="sub">
<li>Sub 2.1</li>
<li>Sub 2.2</li>
</ul>
</li>
<li><span>top 3</span></li>
</ul>
</div>
<div id="txt">
<p>Some text.</p>
</div>