title: Pure html and Css onclick Dropdown menu
body: <p>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.</p>
  <p>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.</p>
  <p>The dropdowns I am referring to are &quot;select a category&quot; and &quot;item-list&quot; on the code below.</p>
  <p>I used the snippet from this source to code my dropdown: <a href="https://lage.us/CSS-Onclick-Dropdown-Menu.html" rel="nofollow noreferrer">https://lage.us/CSS-Onclick-Dropdown-Menu.html</a></p>
  <p>I tried my best to trim the code below.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .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;
     }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPEhtml&gt;
    &lt;html&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;head&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
        &lt;div class="grid-container"&gt;
  
          &lt;div class="header" style="diplay: inline-block"&gt;
          &lt;/div&gt;
          &lt;div id="navigation"&gt;
          &lt;/div&gt;
  
  
          &lt;div id="services"&gt;
            &lt;div tabindex="0" class="dropdown-2-button"&gt;
              &lt;div class="dropdown-2" id="dropdown3"&gt;
                &lt;a href="item1.php"&gt;item 1&lt;/a&gt;
                &lt;a href="item2.php"&gt;item 2&lt;/a&gt;
                &lt;a href="item3.php"&gt;item 3&lt;/a&gt;
                &lt;a href="item4.php"&gt;item 4&lt;/a&gt;
                &lt;a href="item5.php"&gt;item 5&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="drop-down"&gt;
            &lt;div tabindex="0" class="my-dropdown"&gt;
              &lt;div class="dropdown-content"&gt;
                &lt;a href="p1.php"&gt;p1&lt;/a&gt;
                &lt;a href="p2.php"&gt;p2&lt;/a&gt;
                &lt;a href="p3.php"&gt;p3&lt;/a&gt;
                &lt;a href="p4.php"&gt;p4&lt;/a&gt;
                &lt;a href="p5.php"&gt;p5&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div id="client-terminal"&gt;
          &lt;/div&gt;
          &lt;div id="introduction"&gt;
  
            &lt;div class="a_b-drpbtn" tabindex="0"&gt;
              &lt;p&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="cr-drpbtn" tabindex="0"&gt;
              &lt;p&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;br&gt;abc &lt;br&gt;&lt;a href="https://abc.php"&gt;test link&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="sheq-drpbtn" tabindex="0"&gt;
              &lt;p&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="c-drpbtn" tabindex="0"&gt;
              &lt;p&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="m_m-drpbtn" tabindex="0"&gt;
              &lt;p&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;br&gt;abc&lt;/p&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/body&gt;
  
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>