html - 忽略CSS中的子列表

Question

所以我在 html 和 css3 中尝试自己，我发现了图片中描述的问题:

What I have

What I want

所以我想做的是忽略“概念”的文本字段将“行星”向右移动。

目前的 html 结构是这样的:

HTML:

 <div class="masthead__inner-wrap">
   <li class="masthead_menu-item">
   <a href="LinkToConcepts"></a> 
     <ul subhead-links>
       <li class="subhead-link">
         <a href="LinkToSubheadLink"></a>
       </li>
     </ul>
   </li>
 </div>

CSS:

.masthead__menu-item {
  display: block;
  list-style-type: none;
  white-space: nowrap;

  &--lg {
    padding-right: 2em;
    font-weight: 700;
  }
}

.subhead-links{
  border-radius: 0.2em;
  border: 2px solid #73AD21;
  border-color: $border-color;
  position: relative;
  clear: both;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
}

.subhead-link {
  font-size: $type-size-7;
  display: block;
  list-style-type: none;
  white-space: nowrap;

  &--lg {
    padding-right: 1em;
    font-weight: 700;
  }
}

所以我所做的是将副标题链接填充为列表项(通过 liquid)，然后将它们显示为副标题链接。但我不知道如何忽略“副标题”列表项，以便不移动下一个刊头__菜单项。

谢谢!

Answer 1

你想要这样的东西吗？

.masthead_menu-item li{display:inline;}
.sublist li{display:none;}
.sublist:target li{
	display:inline;
	}

<div class="masthead__inner-wrap">
    <ul class="masthead_menu-item">
        <li><a href="#concepts_sublist">Concepts</a></li>
		<li><a href="#planets_sublist">Planets</a></li>
    </ul>
	<ul class="sublist" id="concepts_sublist">
		<li><a href="#">Waves</a></li>
		<li><a href="#">Magic</a></li>
	</ul>
	<ul class="sublist" id="planets_sublist">
		<li><a href="#">Planet1</a></li>
		<li><a href="#">Planet2</a></li>
	</ul>
</div>