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

Here is my answer. My mistake was in the GWT configuration. I used the wrong -war direction in the dev mode parameters. Specifically, I had a local GWTP project that had a local war with GWT client code. Sadly, I used that war in my new GWTP project. I modified my war address and recompiled my project without GWT client code.