CSS and HTML DROPDOWN MENU

Question

I am requesting assistance on the same issue for the second time, It was my first time posting when I asked this question before so the code was not trimmed and was too long to receive response.

I tried trimming it this time (as best as I can without interfering with its display).

I also added guidelines to make it easy for anyone inspecting the code to find what they are looking for and my problem.

HERE IS MY PROBLEM

I want the two dropdown menus with buttons Price-list and select a category to be clickable on a mobile device screen.

They are clickable on desktop screen but they some how drop down but the links are not clickable on smaller screens.

I tried z-index and cursor settings with no success.

Below is the Code Snippet:

html,
 body {
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   overflow-x: hidden;
   background-color: #E2E5AA;
 }

 /* Begin Grid Area Settings */

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

 /* Set header grid-area*/
 .header {
   grid-area: header;
 }

 /* Navigation grid-area*/
 #navigation {
   grid-area: navigation;
 }

 /* Services grid-area*/
 #services {
   grid-area: services;
 }

 /* Set price list dropdown grid-area */
 .drop-down {
   grid-area: dropdown;
 }

 /*Set description grid-area */
 #introduction {
   grid-area: description;
 }

 /* set grid-area for client-terminals */
 #client-terminal {
   grid-area: client;
 }

 /* Set grid-area for footer */
 #footer {
   grid-area: footer;
 }


 /* End Grid-Area Settings*/


 /*set mobile-view display*/
 @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';
   }


   /* ### HEADER SETTINGS, DONT THINK PROBLEM WOULD BE HERE ### */ 

  .header ul {
     text-align: center;
     list-style-type: none;
     padding: 0px;
     margin: 0px;
   }

   .header li {
     display: inline-block;
   }

   .header img {
     width: 80px;
     height: 44px;
     margin-bottom: -13%;
   }

   .header h1 {
     font-size: 25px;
   }

   .header {
     padding: 0px;
   }

   /* END HEADER SETTINGS*/


   /* THIS IS THE SECTION WHERE I STYLED MY DROP DOWNS, I TRIED TO SEPARATE THE TWO DROPDOWN STYLING AS AN ATTEMPT TO MAKE IT EASY FOR THE COMMUNITY TO READ MY CODE */

   /* ##### MY-DROPDOWN SETTINGS (FIRST DROPDOWN THAT DROPS WHEN YOU CLICK PRICE LIST), ### */

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

   /*style the dropdown content text*/

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


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

/* ### DROPDOWN 2: DROPS DOWN WHEN YOU CLICK ON "SELECT A CATEGORY" ### */

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



/* #### THIS IS WHERE I FINISHED THE SETTINGS FOR THE DROPDOWN MENU FOR MOBILE DEVICES  ####*/

   #navigation ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
   }


   #navigation {
     background-color: #790D76;
     margin: 0px;
     padding: 2px;
   }


   #navigation li {
     float: left;
   }




   #client-terminal ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }


   #client-terminal {
     background-color: #290C28;
     margin: 0px;
     padding: 0px 2px;
   }





   /* END services dropdown settings*/



   /* BEGIN introduction settings*/

   #introduction {
     display: block;
   }


   #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
   }

   .header {
     background-color: #290C28;
     font-size: 15px;
   }


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


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

   #introduction p {
     font-size: 110%
   }


   .a_b-drpbtn p {

     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     border: none;
     cursor: pointer;
     opacity: 0.6;
     font-weight: normal;
     float: right;
     z-index: 1;
     display: none;
   }

   .a_b-drpbtn:before {
     content: "\2193  Service 5";
     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:focus {
     pointer-events: none;
   }

   .a_b-drpbtn:focus p {
     opacity: 1;
     display: block;
   }

   .a_b-drpbtn:hover {
     background-color: #8F228C
   }




   .c-drpbtn p {

     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     opacity: 0.6;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     text-align: center;
     margin: 4px;
     z-index: 1;
     display: none;
   }

   .c-drpbtn:before {
     content: "\2193  Service 3";
     color: black;
     display: block;
     padding: 20px;
     background: transparent;
     border: none;
     cursor: pointer;
     opacity: 1;
     font-weight: bold;
     text-align: center;
     margin: auto;
     z-index: 1;
   }



   .c-drpbtn:focus {
     pointer-events: none;
   }

   .c-drpbtn:focus p {
     opacity: 1;
     display: block;
   }

   .c-drpbtn:hover {
     background-color: #8F228C
   }




   .m_m-drpbtn p {

     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     border: none;
     cursor: pointer;
     opacity: 0.6;
     font-weight: normal;
     float: right;
     z-index: 1;
     display: none;
   }

   .m_m-drpbtn:before {
     content: "\2193  Service 2";
     color: black;
     display: block;
     padding: 20px;
     background: transparent;
     border: none;
     cursor: pointer;
     opacity: 1;
     font-weight: bold;
     text-align: center;
     margin: auto;
     z-index: 1;
   }



   .m_m-drpbtn:focus {
     pointer-events: none;
   }

   .m_m-drpbtn:focus p {
     opacity: 1;
     display: block;
   }

   .m_m-drpbtn:hover {
     background-color: #8F228C
   }


   .sheq-drpbtn p {

     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     opacity: 0.6;
     border: none;
     cursor: pointer;
     font-weight: normal;
     float: right;
     z-index: 1;
     display: none;
   }

   .sheq-drpbtn:before {
     content: "\2193  Service 1";
     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;
   }



   .sheq-drpbtn:focus {
     pointer-events: none;
   }

   .sheq-drpbtn:focus p {
     opacity: 1;
     display: block;
   }

   .sheq-drpbtn:hover {
     background-color: #8F228C
   }




   .cr-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;
   }

   .cr-drpbtn:before {
     content: "\2193  Service 6";
     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;
   }



   .cr-drpbtn:focus {
     pointer-events: none;
   }

   .cr-drpbtn:focus p {
     opacity: 1;
     display: block;
   }

   .cr-drpbtn:hover {
     background-color: #8F228C
   }

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

   #introduction {
     background-image: url("empty_office.jpg");
     opacity: 1;
     background-repeat: no-repeat;
     background-size: cover;
   }




   .drop-down {
     display: block;
     background: #E2E5AA !important;
     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:before {
     content: "Price-List";
     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 {

     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: "Price-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;
   }

   .my-dropdown {
     content: "Price-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;
   }


   .header ul {
     text-align: center;
     list-style-type: none;
     padding: 0px;
     margin: 0px;


   }

   .header li {
     display: inline-block;
   }

   .header img {
     width: 182px;
     height: 100px;
     margin-bottom: -13%;
   }

   .header h1 {
     font-size: 75px;
   }

   .header {
     padding: 0px;
   }

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

   #client-terminal ul {
     text-align: center;
     list-style-type: none;
   }

   #client-terminal li {
     display: inline-block;
 }

<!DOCTYPEhtml>
  <html>

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



    <body>

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


          <ul>
            <li><img class="logo" src="logo.png" alt="Logo"></li>
            <li>
              <h1 style="color: #E2E5AA;"> Company name</h1>
            </li>
          </ul>
        </div>
        <div id="navigation">
          <ul>

            <li><a href="/home.php">Home</a></li>
            <li><a href="/about-us.php">About Us</a></li>
            <li><a href="/contact-us.php">Contact Us</a></li>
          </ul>
        </div>



        <!-- ##### SELECT A CATEGORY MENU CODE BEGIN #### -->

        <div id="services">

          <div tabindex="0" class="dropdown-2-button">


            <div class="dropdown-2">



              <a href="serice1_pl.php">service1.php</a>
              <a href="service2_pl.php">service2.php</a>
              <a href="service3_pl.php">service3.php</a>
              <a href="service4_pl.php">service4.php</a>
              <a href="service5_pl.php">service5.php</a>
            </div>

          </div>
        </div>

        <!-- ###### SELECT A CATEGORY CODE END ###### -->




        <!-- ##### PRICELIST HTML CODE BEGIN ##### -->

        <div class="drop-down">
          <div tabindex="0" class="my-dropdown">


            <div class="dropdown-content">
              <a href="service1.php"> service1</a>
              <a href="service1.2.php">service1.2</a>
              <a href="service2.php">sevice2</a>
              <a href="service3.php">service3</a>
              <a href="service4.php">service4</a>
            </div>
          </div>

        </div>

        <!-- ##### PRICELIST HTML CODE END ##### -->





        <div id="client-terminal">
          <ul>
            <li><a href="terminal.php">Register</a></li>
            <li><a href="terminal.php">Login</a></li>
          </ul>
        </div>
        <div id="introduction">

          <sub-heading>Homepage</sub-heading>
          <p style="font-weight: normal;">
            Intro message
            <br><br>
            Introduction message goes here
            --------------------------------------------------------------------------------------------------------------- ends here
          </p>

          <div class="a_b-drpbtn" tabindex="0">

            <p>
              abc abc abc abc abc abc abc abc abc abc abc abc abc
              <br>abc abc abc
            </p>

          </div>

          <div class="cr-drpbtn" tabindex="0">

            <p>
              abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc <a href="service-.php"> abc services</a> </p>

          </div>

          <div class="sheq-drpbtn" tabindex="0">

            <p>
              abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc <a href="service-.php"> abc services</a>
            </p>
          </div>

          <div class="c-drpbtn" tabindex="0">

            <p>
              abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
              <br><br>
              abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc <a href="service-.php"> abc services</a> ber.
            </p>
          </div>

          <div class="m_m-drpbtn" tabindex="0">

            <p>
              abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc <a href="service-.php"> abc services</a> ber.
            </p>

          </div>

        </div>
      </div>

    </body>

  </html>