需要在菜单中使用 "target" 属性的建议

Question

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

 :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

你需要引用你的 child 元素，它应该在点击时显示，通过设置像 #child-1 这样的 ID 在你的锚中：<a href="#child-1">CAT 1</a>
添加 child-1 作为您的 child 元素的 ID，这样您的锚点和您的 child 就“连接”起来了。 <ul class="child" id="child-1">。现在这个 child 元素将被 :target 选择器寻址，当锚点被点击时
由于目标选择器解决了 child-element，您的 CSS 可能看起来像这样 ul:target { ... }.

注意：请记住，每个 anchor/child 对的 ID 必须是唯一的。

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

附加：您想在代码中实现嵌套下拉菜单。我不确定这种嵌套行为是否可以在纯 CSS 中实现，因为您无法在 CSS 中寻址 parent 元素，因此您没有机会保留parent(s) 显示，同时显示 child。如果有人有任何想法，请告诉我！

.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>

需要在菜单中使用 "target" 属性的建议

Need advice for use a "target" property in menu

css

navigation

target

需要在菜单中使用 "target" 属性 的建议

Need advice for use a "target" property in menu

css

navigation

target

需要在菜单中使用 "target" 属性的建议