Pure html and Css onclick Dropdown menu

Question

I am trying to create an onclick dropdown menu that will appear on on a mobile device and dissappear when the screen is wider (appear on another section), however, the @media query allowed me to do that but the links in the menus are not clickable.

I have tried to play around with z-index with no success and also other ideas from the internet but I haven't succeded. Please let me know what is wrong.

The dropdowns I am referring to are "select a category" and "item-list" on the code below.

I used the snippet from this source to code my dropdown: https://lage.us/CSS-Onclick-Dropdown-Menu.html

I tried my best to trim the code below.

 .grid-container {
   background: #E2E5AA;
   display: border-box;
   padding: 0px;
   margin: 0px;
   background-size: cover;
 }

  .header {
   grid-area: header;
 }

  #navigation {   grid-area: navigation;}
  #services {grid-area: services;}
 .drop-down {grid-area: dropdown;}
  #introduction {grid-area: description;}
#client-terminal {grid-area: client; }


 @media screen and (min-width: 250px) {
   .grid-container {
     width: 100%;
     height: 100%;
     display: grid;
     grid-template-areas: 'header header header client'
       'navigation navigation navigation dropdown'
       'description description description description'
       'services services services services';
   }

   .my-dropdown {
     color: #E2E5AA;
     position: relative;
     padding: 4px;
     background: #790D76;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     float: right;
     z-index: 1;
   }

   .my-dropdown:before {
     content: "Price-List";
     color: #E2E5AA;
     position: relative;
     padding: 4px;
     background: #790D76;
     border: none;
     cursor: ;
     font-size: 15px;
     font-weight: normal;
     float: right;
     z-index: 1;
   }

   .my-dropdown:focus {
     pointer-events: none;
   }

   .my-dropdown:focus .dropdown-content {
     opacity: 1;
     visibility: visible;
   }

   .my-dropdown:hover {
     background-color: #8F228C
   }

   .drop-down {
     position: relative;
     display: inline-block;
     background-color: #790D76;
   }

   .dropdown-content {
     visibility: hidden;
     position: absolute;
     background-color: #E2E5AA;
     min-width: ;
 2;
     overflow: hidden;
     pointer-events: auto;
   }

   .dropdown-content a {
     color: black;
     padding: 4px;
     text-decoration: none;
     display: block;
     font-size: 15px;
     z-index:3;
   }

   /* style option on hover*/

   .dropdown-content a:hover {
     background-color: #8F228C;
   }

  #navigation {
     background-color: #790D76;
   }
  
   #client-terminal {
     background-color: #290C28;
   }

  
   .dropdown-2-button:before {
     content: "Select A Category";
     color: #E2E5AA;
     padding: 4px;
     background: #E2E5AA;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     float: left;
     margin: 0px 0px 15px 0px;
     background-color: #790D76;
   }

   .dropdown-2-button:focus {
     pointer-events: none;
   }

   .dropdown-2-button:focus .dropdown-2 {
     opacity: 1;
     visibility: visible;
   }

   #services {
     position: relative;
     display: inline-block;
     background-color: transparent;
     margin: 0px;
   }

   .dropdown-2 {
     list-style-type: none;
     padding: 0;
     margin: 0;
     position: absolute;
     background-color: #E2E5AA;
     min-width: relative;
     z-index: 1;
     overflow: hidden;
     pointer-events: auto;
     visibility: hidden;
     border-radius: 3px;
   }

   .dropdown-2 a {
     color: black;
     padding: 4px;
     text-decoration: none;
     display: block;
     font-size: 15px;
   }

   .dropdown-2 a:hover {
     background-color: #790D76;
   }
  
   #introduction {
     display: block;
   }

   #introduction sub-heading {
     display: block;
     font-size: 20px;
     padding: 10px;
     text-align: center;
     font-weight: bold;
   }

   #introduction p {
     text-align: center;
     font-size: 15px;
   }

   #introduction a {
     text-decoration: none;
     color: purple;
     display: inline-block;
   }

   #introduction a:hover {
     background-color: #8F228C;
     color: #E2E5AA
   }
   
   .c-drpbtn p,
   .a_b-drpbtn p,
   .cr-drpbtn p,
   .m_m-drpbtn p,
   .sheq-drpbtn p {
     display: none;
   }

 }


 @media screen and (min-width: 640px) {
   .grid-container {
     width: 100%;
     height: 100%;
     padding: 0px;
     margin: 0px;
     display: grid;
     grid-template-areas: 'header header header header'
       'navigation navigation navigation client'
       'dropdown dropdown description description'
       'dropdown dropdown services services'
       'footer footer footer footer';
   }


   #introduction {
     padding: 20px;
     font-size: 130%;
     font-weight: bold
   }

   #introduction p {
     font-size: 110%
   }


 .c-drpbtn p,
   .a_b-drpbtn p,
   .cr-drpbtn p,
   .m_m-drpbtn p,
   .sheq-drpbtn p {
     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     opacity: 0.6;
     border: none;
     cursor: pointer;
     font-weight: normal;
     z-index: 1;
     display: none;
     margin: 4px;
   }
   
   .c-drpbtn:focus,
   .a_b-drpbtn:focus,
   .cr-drpbtn:focus,
   .m_m-drpbtn:focus,
   .sheq-drpbtn:focus {
 pointer-events: none;
   }
   
    .c-drpbtn:focus p,
   .a_b-drpbtn:focus p,
   .cr-drpbtn:focus p,
   .m_m-drpbtn:focus p,
   .sheq-drpbtn:focus p {
     opacity: 1;
     display: block;
   }
   
    .c-drpbtn:hover,
   .a_b-drpbtn:hover,
   .cr-drpbtn:hover,
   .m_m-drpbtn:hover,
   .sheq-drpbtn:hover {
     background-color: #8F228C;
   }
   
   .c-drpbtn:before,
   .a_b-drpbtn:before,
   .cr-drpbtn:before,
   .m_m-drpbtn:before,
   .sheq-drpbtn:before {
     color: black;
     display: block;
     padding: 20px;
     background: transparent;
     opacity: 1;
     border: none;
     cursor: pointer;
     font-weight: bold;
     text-align: center;
     margin: auto;
     z-index: 1;
   }

   .a_b-drpbtn:before {
     content: "\2193  Item 1";
   }

   .c-drpbtn:before {
     content: "\2193  Item 2";
   }

.m_m-drpbtn:before {
     content: "\2193 Item 3";
   }

   .sheq-drpbtn:before {
     content: "\2193  Item 4";
   }


   .cr-drpbtn:before {
     content: "\2193  Item 5";
     }

   .dropdown-2-button {
     visibility: hidden;
   }

   .drop-down {
     display: block;
     background: #E2E5AA;
     width: 100%;
     border: #790D76 solid;
     border-width: 0px 10px 0px 4px;
   }

   .dropdown-content {
     visibility: visible;
     display: block;
     overflow: 0px;
     width: 100%;
     position: relative;
     background: #E2E5AA;
     pointer-events: auto;
     font-size: 130%;
   }

   .my-dropdown:hover {
     background-color: #E2E5AA;
   }

 

   .my-dropdown {

     color: black;
     position: relative;
     padding: 4px;
     background: #E2E5AA;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     text-align: left;
     float: left;
     z-index: 1;
   }

   .my-dropdown:before {
     content: "item-List";
     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     text-align: left;
     z-index: 1;
   }

   

   .dropdown-content a:hover {
     background-color: #8F228C;
   }
   
   #client-terminal {
     background-color: #790D76;
   }
 }

<!DOCTYPEhtml>
  <html>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <head>
    </head>

    <body>

      <div class="grid-container">

        <div class="header" style="diplay: inline-block">
        </div>
        <div id="navigation">
        </div>


        <div id="services">
          <div tabindex="0" class="dropdown-2-button">
            <div class="dropdown-2" id="dropdown3">
              <a href="item1.php">item 1</a>
              <a href="item2.php">item 2</a>
              <a href="item3.php">item 3</a>
              <a href="item4.php">item 4</a>
              <a href="item5.php">item 5</a>
            </div>
          </div>
        </div>


        <div class="drop-down">
          <div tabindex="0" class="my-dropdown">
            <div class="dropdown-content">
              <a href="p1.php">p1</a>
              <a href="p2.php">p2</a>
              <a href="p3.php">p3</a>
              <a href="p4.php">p4</a>
              <a href="p5.php">p5</a>
            </div>
          </div>
        </div>


        <div id="client-terminal">
        </div>
        <div id="introduction">

          <div class="a_b-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>
          <div class="cr-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc <br><a href="https://abc.php">test link</a></p>
          </div>
          <div class="sheq-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>
          <div class="c-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>
          <div class="m_m-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>

        </div>

      </div>
    </body>

  </html>

Answer 1

The issue is focus. Keep on hover in mobile and on focus on desktop.

EDITED CSS-

.grid-container {
    background: #e2e5aa;
    display: border-box;
    padding: 0px;
    margin: 0px;
    background-size: cover;
  }

  .header {
    grid-area: header;
  }

  #navigation {
    grid-area: navigation;
  }
  #services {
    grid-area: services;
  }
  .drop-down {
    grid-area: dropdown;
  }
  #introduction {
    grid-area: description;
  }
  #client-terminal {
    grid-area: client;
  }

  /*addd for mobile*/
  .my-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
  }

  /*added for mobile*/
  .dropdown-2-button:hover .dropdown-2 {
    opacity: 1;
    visibility: visible;
  }

  @media screen and (min-width: 250px) {
    .grid-container {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-areas:
        "header header header client"
        "navigation navigation navigation dropdown"
        "description description description description"
        "services services services services";
    }

    .my-dropdown {
      color: #e2e5aa;
      position: relative;
      padding: 4px;
      background: #790d76;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      float: right;
      z-index: 1;
    }

    .my-dropdown:before {
      content: "Price-List";
      color: #e2e5aa;
      position: relative;
      padding: 4px;
      background: #790d76;
      border: none;
      /* cursor: ; */ /*error*/
      font-size: 15px;
      font-weight: normal;
      float: right;
      z-index: 1;
    }

    .my-dropdown:focus {
      pointer-events: none;
    }

    /* .my-dropdown:focus .dropdown-content {
             opacity: 1;
             visibility: visible;
           } */

    .my-dropdown:hover {
      background-color: #8f228c;
    }

    .drop-down {
      position: relative;
      display: inline-block;
      background-color: #790d76;
    }

    .dropdown-content {
      visibility: hidden;
      position: absolute;
      background-color: #e2e5aa;
      /* min-width: ;
         2; */
      /*error*/
      overflow: hidden;
      pointer-events: auto;
    }

    .dropdown-content a {
      color: black;
      padding: 4px;
      text-decoration: none;
      display: block;
      font-size: 15px;
      z-index: 3;
    }

    /* style option on hover*/

    .dropdown-content a:hover {
      background-color: #8f228c;
    }

    #navigation {
      background-color: #790d76;
    }

    #client-terminal {
      background-color: #290c28;
    }

    .dropdown-2-button:before {
      content: "Select A Category";
      color: #e2e5aa;
      padding: 4px;
      background: #e2e5aa;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      float: left;
      margin: 0px 0px 15px 0px;
      background-color: #790d76;
    }

    .dropdown-2-button:focus {
      pointer-events: none;
    }

    /* .dropdown-2-button:focus .dropdown-2 {
             opacity: 1;
             visibility: visible;
           } */

    #services {
      position: relative;
      display: inline-block;
      background-color: transparent;
      margin: 0px;
    }

    .dropdown-2 {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
      background-color: #e2e5aa;
      min-width: relative;
      z-index: 1;
      overflow: hidden;
      pointer-events: auto;
      visibility: hidden;
      border-radius: 3px;
      top: 30px; /*bring the dropdown menu down*/
    }

    .dropdown-2 a {
      color: black;
      padding: 4px;
      text-decoration: none;
      display: block;
      font-size: 15px;
    }

    .dropdown-2 a:hover {
      background-color: #790d76;
    }

    #introduction {
      display: block;
    }

    #introduction sub-heading {
      display: block;
      font-size: 20px;
      padding: 10px;
      text-align: center;
      font-weight: bold;
    }

    #introduction p {
      text-align: center;
      font-size: 15px;
    }

    #introduction a {
      text-decoration: none;
      color: purple;
      display: inline-block;
    }

    #introduction a:hover {
      background-color: #8f228c;
      color: #e2e5aa;
    }

    .c-drpbtn p,
    .a_b-drpbtn p,
    .cr-drpbtn p,
    .m_m-drpbtn p,
    .sheq-drpbtn p {
      display: none;
    }
  }

  @media screen and (min-width: 640px) {
    .grid-container {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
      display: grid;
      grid-template-areas:
        "header header header header"
        "navigation navigation navigation client"
        "dropdown dropdown description description"
        "dropdown dropdown services services"
        "footer footer footer footer";
    }

    #introduction {
      padding: 20px;
      font-size: 130%;
      font-weight: bold;
    }

    #introduction p {
      font-size: 110%;
    }

    .c-drpbtn p,
    .a_b-drpbtn p,
    .cr-drpbtn p,
    .m_m-drpbtn p,
    .sheq-drpbtn p {
      color: black;
      position: relative;
      padding: 4px;
      background: transparent;
      opacity: 0.6;
      border: none;
      cursor: pointer;
      font-weight: normal;
      z-index: 1;
      display: none;
      margin: 4px;
    }

    .c-drpbtn:focus,
    .a_b-drpbtn:focus,
    .cr-drpbtn:focus,
    .m_m-drpbtn:focus,
    .sheq-drpbtn:focus {
      pointer-events: none;
    }

    .c-drpbtn:focus p,
    .a_b-drpbtn:focus p,
    .cr-drpbtn:focus p,
    .m_m-drpbtn:focus p,
    .sheq-drpbtn:focus p {
      opacity: 1;
      display: block;
    }

    .c-drpbtn:hover,
    .a_b-drpbtn:hover,
    .cr-drpbtn:hover,
    .m_m-drpbtn:hover,
    .sheq-drpbtn:hover {
      background-color: #8f228c;
    }

    .c-drpbtn:before,
    .a_b-drpbtn:before,
    .cr-drpbtn:before,
    .m_m-drpbtn:before,
    .sheq-drpbtn:before {
      color: black;
      display: block;
      padding: 20px;
      background: transparent;
      opacity: 1;
      border: none;
      cursor: pointer;
      font-weight: bold;
      text-align: center;
      margin: auto;
      z-index: 1;
    }

    .a_b-drpbtn:before {
      content: "\2193  Item 1";
    }

    .c-drpbtn:before {
      content: "\2193  Item 2";
    }

    .m_m-drpbtn:before {
      content: "\2193 Item 3";
    }

    .sheq-drpbtn:before {
      content: "\2193  Item 4";
    }

    .cr-drpbtn:before {
      content: "\2193  Item 5";
    }

    .dropdown-2-button {
      visibility: hidden;
    }

    .drop-down {
      display: block;
      background: #e2e5aa;
      width: 100%;
      border: #790d76 solid;
      border-width: 0px 10px 0px 4px;
    }

    .dropdown-content {
      visibility: visible;
      display: block;
      overflow: 0px;
      width: 100%;
      position: relative;
      background: #e2e5aa;
      pointer-events: auto;
      font-size: 130%;
    }

    .my-dropdown:hover {
      background-color: #e2e5aa;
    }

    .my-dropdown {
      color: black;
      position: relative;
      padding: 4px;
      background: #e2e5aa;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      text-align: left;
      float: left;
      z-index: 1;
    }

    .my-dropdown:before {
      content: "item-List";
      color: black;
      position: relative;
      padding: 4px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      text-align: left;
      z-index: 1;
    }

    .dropdown-content a:hover {
      background-color: #8f228c;
    }

    #client-terminal {
      background-color: #790d76;
    }
  }

  @media (min-width: 768px) {
    /*add your breakpoint instead of 768*/
    .my-dropdown:focus .dropdown-content {
      opacity: 1;
      visibility: visible;
    }

    .dropdown-2-button:focus .dropdown-2 {
      opacity: 1;
      visibility: visible;
    }
  }

EDITED HTML-

<div class="grid-container">
      <div class="header" style="diplay: inline-block"></div>
      <div id="navigation"></div>

      <div id="services">
        <div tabindex="0" class="dropdown-2-button">
          <div class="dropdown-2" id="dropdown3">
            <a href="item1.php">item 1</a>
            <a href="item2.php">item 2</a>
            <a href="item3.php">item 3</a>
            <a href="item4.php">item 4</a>
            <a href="item5.php">item 5</a>
          </div>
        </div>
      </div>

      <div class="drop-down">
        <div tabindex="0" class="my-dropdown">
          <div class="dropdown-content">
            <a href="p1.php">p1</a>
            <a href="p2.php">p2</a>
            <a href="p3.php">p3</a>
            <a href="p4.php">p4</a>
            <a href="p5.php">p5</a>
          </div>
        </div>
      </div>

      <div id="client-terminal"></div>
      <div id="introduction">
        <div class="a_b-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
        <div class="cr-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc <br /><a href="https://abc.php">test link</a></p>
        </div>
        <div class="sheq-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
        <div class="c-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
        <div class="m_m-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
      </div>
    </div>

HTML ERRORS LISTED BELOW-

this should be - display: inline-block
<div class="header" style="diplay: inline-block"></div>

CSS ERRORS LISTED BELOW-

.my-dropdown:before {
          content: "Price-List";
          color: #e2e5aa;
          position: relative;
          padding: 4px;
          background: #790d76;
          border: none;
          /* cursor: ; */ /*error*/
          font-size: 15px;
          font-weight: normal;
          float: right;
          z-index: 1;
        }
    
        .dropdown-content {
          visibility: hidden;
          position: absolute;
          background-color: #e2e5aa;
          /* min-width: ;
             2; */
          /*error*/
          overflow: hidden;
          pointer-events: auto;
        }