需要使用";目标";属性

Question

我正在尝试制作一个通过单击打开的下拉菜单。我正在尝试使用下面的目标属性how，但徒劳。有人能建议如何修复代码吗？

:target + .parent > ul {
display:block;
position:absolute;
z-index:9999;

}

.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
:target + .parent > ul {
display:block;
position:absolute;
z-index:9999;

}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
/* left: 100%;
top: 0;
margin-left:1px;
*/
}
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
display: table;
text-align: center;
}
nav ul {
text-align: center;
}

<nav>
<ul id="menu">
<li class="parent">
<a href="#">CAT 1</a>
<ul class="child">
<li class="parent">
<a href="#">Video Games <span class="expand">    
&#9660;</span></a>
<ul class="child">
<li><a href="#">Car</a></li>
<li class="parent">
<a href="#">Bike Race<span class="expand">     
&#9660;</span></a>
<ul class="child">
<li><a href="#">Yoyo</a></li>
<li><a href="#">Doctor Kit</a></li>
</ul>
<li><a href="#">Fishing</a></li>
</ul>
</li>
<li><a href="#">Barbies</a></li>
<li><a href="#">Teddy Bear</a></li>
<li><a href="#">Golf Set</a></li>
</ul>
</li>
<li class="parent">
<a href="#">CAT 2</a>
<ul class="child">
<li><a href="#">Yoyo</a></li>
<li><a href="#">Doctor Kit</a></li>
<li class="parent">
<a href="#">Fun Puzzle<span class="expand">  
&#9660;</span></a>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li><a href="#">Uno Cards</a></li>
</ul>
</li>
<li class="parent"><a href="#">CAT 3</a>
<li class="parent"><a href="#">CAT 4</a>
<li class="parent"><a href="#">CAT 5</a>
<li class="parent"><a href="#">CAT 6</a>
<li class="parent">
<a href="#">CAT 7</a>
<ul class="child">
<li><a href="#">Battery Toys</a></li>
<li class="parent">
<a href="#">Remote Toys <span class="expand">    
&#9660;</span></a>
<ul class="child">
<li><a href="#">Cars</a></li>
<li><a href="#">Aeroplane</a></li>
<li><a href="#">Helicopter</a></li>
</ul>
</li>
<li><a href="#">Soft Toys</a>
</li>
<li><a href="#">Magnet Toys</a></li>
</ul>
</li>
</ul>
</nav>

Answer 1

1. 您需要通过设置类似#child-1:<a href="#child-1">CAT 1</a>的ID来引用您的子元素，该子元素应在单击时显示在锚点中

2. 将child-1作为ID添加到你的子元素中，这样你的锚点和你的孩子就是"；连接"；。<ul class="child" id="child-1">。现在，当点击锚时，这个子元素将由:target选择器寻址

3. 由于目标选择器寻址子元素，因此CSS可以看起来像ul:target { ... }。

注意：请记住，每个锚点/子对的ID必须是唯一的。

带有可执行示例的源：https://www.w3schools.com/cssref/sel_target.asp

附加：您希望在代码中实现嵌套下拉列表。我不确定这种嵌套行为是否可以在纯CSS中实现，因为您不能在CSS中寻址父元素，因此在显示子元素时，您没有机会保持显示父元素。如果有人有任何想法，请告诉我！

.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
ul:target {
display:block;
position:absolute;
z-index:9999;

}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
/* left: 100%;
top: 0;
margin-left:1px;
*/
}
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
display: table;
text-align: center;
}
nav ul {
text-align: center;
}

<nav>
<ul id="menu">
<li class="parent">
<a href="#child-1">CAT 1</a>
<ul class="child" id="child-1">
<li class="parent">
<a href="#child-1-1">Video Games <span class="expand">    
&#9660;</span></a>
<ul class="child" id="child-1-1">
<li><a href="#">Car</a></li>
<li class="parent">
<a href="#child-1-1-1">Bike Race<span class="expand">     
&#9660;</span></a>
<ul class="child" id="child-1-1-1">
<li><a href="#">Yoyo</a></li>
<li><a href="#">Doctor Kit</a></li>
</ul>
<li><a href="#">Fishing</a></li>
</ul>
</li>
<li><a href="#">Barbies</a></li>
<li><a href="#">Teddy Bear</a></li>
<li><a href="#">Golf Set</a></li>
</ul>
</li>
<li class="parent">
<a href="#child-2">CAT 2</a>
<ul class="child" id="child-2">
<li><a href="#">Yoyo</a></li>
<li><a href="#">Doctor Kit</a></li>
<li class="parent">
<a href="#child-2-1">Fun Puzzle<span class="expand">  
&#9660;</span></a>
<ul class="child" id="child-2-1">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li><a href="#">Uno Cards</a></li>
</ul>
</li>
<li class="parent"><a href="#">CAT 3</a>
<li class="parent"><a href="#">CAT 4</a>
<li class="parent"><a href="#">CAT 5</a>
<li class="parent"><a href="#">CAT 6</a>
<li class="parent">
<a href="#child-7">CAT 7</a>
<ul class="child" id="child-7">
<li><a href="#">Battery Toys</a></li>
<li class="parent">
<a href="#child-7-1">Remote Toys <span class="expand">    
&#9660;</span></a>
<ul class="child" id="child-7-1">
<li><a href="#">Cars</a></li>
<li><a href="#">Aeroplane</a></li>
<li><a href="#">Helicopter</a></li>
</ul>
</li>
<li><a href="#">Soft Toys</a>
</li>
<li><a href="#">Magnet Toys</a></li>
</ul>
</li>
</ul>
</nav>