CSS嵌套导航,下一行有子项

问题描述 投票:2回答:2

我想用ulli建立一个嵌套导航,它也可以有子项目。

当父级li上有ative类时,子项应出现在下一行(该类用javascript设置为onclick)。

只有当子列表有position: absolut时,我才设法做到这一点。不幸的是,它会重叠以下内容。

这是它的样子:

navigation

我真的很想这样做,而不必使用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>
html css
2个回答
0
投票

不是最动态的方式或非常可扩展但你可以使用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>

您需要使用焦点伪标签才能工作。


0
投票

检查一下并相应地修改它。我没有使用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>
© www.soinside.com 2019 - 2024. All rights reserved.