Search code examples
cssnavigationtarget

Need advice for use a "target" property in menu

I'm trying to make a drop-down menu that opens by click. I am trying to use the target property how below for this, but in vain. Could someone suggest how to fix the code?

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

Solution

    1. You need to reference your child element, which should be displayed on click, in your anchor by setting an ID like #child-1: <a href="#child-1">CAT 1</a>

    2. Add child-1 as ID to your child element, so that your anchor and your child are "connected". <ul class="child" id="child-1">. Now this child element will be addressed by the :target selector, when the anchor is clicked

    3. Since the target selector addresses the child-element, your CSS can look like this ul:target { ... }.

    Note: Keep in mind that IDs must be unique for each anchor/child pair.

    Source with an executable example: https://www.w3schools.com/cssref/sel_target.asp

    Additional: You want to implement a nested dropdown in your code. I'm not sure if this nested behavior is possible to be implemented in pure CSS, because you can not address the parent element in CSS, and therefore you have no chance to keep the parent(s) displayed, while the child is shown. If someone has any idea, please let me know!

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