HTML and CSS Dropdown

Issue

I am trying to create two menus on a website that would drop down on a mobile device and appear on the side on Desktops.

I have managed to that successfully but I am not sure I did it right since the links on the menus are not clickable on a smaller screen. I used the @media query to manage the appearance on different screens.

The menus I am referring to are menu 1 and two on the code below.

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'
           'footer footer footer footer';
       }
    
    
       /* Begin Dropdown Pricelist Settings*/
    
      .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;
       }
       
       /*style the dropdown button*/
       .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: "menu-1";
         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
       }
    
       /* style the container needed to position the dropdown content*/
       .drop-down {
         position: relative;
         display: inline-block;
         background-color: #790D76;
       }
    
       /*style the dropdown content*/
    
       .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;
       }
    
       /* style option on hover*/
    
       .dropdown-content a:hover {
         background-color: #8F228C;
       }
    
    
    
          /* END Dropdown Pricelist Settings */
    
    
       /* BEGIN Navigation Settings*/
    
    
       /*remove navigation default settings*/
    
       #navigation ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
       }
    
       /* insert grid backgroung color*/
    
       #navigation {
         background-color: #790D76;
         margin: 0px;
         padding: 2px;
       }
    
       /* make items float nect to each other*/
    
       #navigation li {
         float: left;
       }
    
       /* style the link display*/
    
       #navigation a {
         display: block;
         background-color: #790D76;
         padding: 4px;
         text-decoration: none;
         font-size: 15px;
         color: #E2E5AA;
       }
    
       /* navigation on hover settings*/
    
       #navigation a:hover {
         background-color: #8F228C;
       }
    
       /* navigation on acive settings*/
    
       #navigation a:active {
         background-color: purple;
       }
    
       /* END Navigation Settings */
    
    
       /* BEGIN Client-Terminal Settings*/
    
    
       /* Remove default list settings*/
    
       #client-terminal ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
       }
    
       /* style link item*/
    
       #client-terminal a {
         display: block;
         background-color: transparent;
         padding: 4px;
         text-decoration: none;
         font-size: 100%;
         text-align: right;
         color: #C8D32A;
       }
    
       /* client-terminal main background color*/
    
       #client-terminal {
         background-color: #290C28;
         margin: 0px;
         padding: 0px 2px;
       }
    
       /*style link on hover*/
    
       #client-terminal a:hover {
         background-color: #791575;
       }
    
       /* style link active*/
    
       #client-terminal a:active {
         background-color: #cc99ff;
       }
    
       /* END client-terminal settings*/
    
    
       /* Begin services dropdown Settings*/
    
       .dropdown-2-button:before {
         content: "menu2";
         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;
       }
    
    
    
       /* END services dropdown settings*/
    
    
       /* Begin footer settings*/
    
    
       /* END footer settings */
    
       /* BEGIN introduction settings*/
    
       #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
       }
    
       .header {
         background-color: #290C28;
         font-size: 15px;
       }
    
       #footer header {
         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%
       }
    
    
       .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  Accounting and Bookkeeping Services";
         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;
         content: "\2191  Accounting and Bookkeeping Services";
       }
    
       .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  Contractors";
         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  Marketing and Management";
         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  Safety, Health and Environment";
         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  Company Registration";
         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: "menu1";
         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: "menu1";
         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: "menu1";
         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;
       }
    
       #client-terminal a {
         font-size: 20px;
       }
    
       #navigation a {
         font-size: 20px;
       }
    
       #client-terminal a:hover {
         background-color: #8F228C;
       }
    
     }
<body>
    
          <div class="grid-container">
            <div class="header" style="diplay: inline-block">
    
    
              <ul>
                <li><img class="logo" src="boslogo.png" alt="BOS Logo"></li>
                <li>
                  <h1 style="color: #E2E5AA;"> BOS Consultants</h1>
                </li>
              </ul>
            </div>
            <div id="navigation">
              <ul>
    
                <li><a href="/index.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>
            <div id="services">
    
              <div tabindex="0" class="dropdown-2-button">
    
    
                <div class="dropdown-2" id="dropdown3">
    
    
    
                  <a href="accountingandtax.php">Accounting and Tax</a>
                  <a href="companyregistration.php">Company Registration</a>
                  <a href="contractor.php">Contractors</a>
                  <a href="sheq.php">Safety, Health, Quality and Quality</a>
                  <a href="marketingandmanagement.php">Marketing and Management</a>
                </div>
    
              </div>
            </div>
    
            <div class="drop-down">
              <div tabindex="0" class="my-dropdown">
    
    
                <div class="dropdown-content">
                  <a href="accounting-and-tax-pricelist.php"> Accounting and Tax</a>
                  <a href="company-registration-pricelist.php">Company Registration</a>
                  <a href="contractor-pricelist.php">Contractor</a>
                  <a href="sheq-pricelist.php">SHEQ</a>
                  <a href="marketing-and-management.php">Marketing and Management</a>
                </div>
              </div>
    
    
            </div>
    
            <div id="client-terminal">
              <ul>
                <li><a href="signup.php">Register</a></li>
                <li><a href="login.php">Login</a></li>
              </ul>
            </div>
            <div id="introduction">
    
              <sub-heading>Accounting and Taxation</sub-heading>
              <p style="font-weight: normal;">
                Not only is it a legal obligation but knowing your financial position as a business is mandatory for growth and success.
                <br><br>
                We provide a range of services to assist you in reaching your financial goals. We ensure that we serve you beyond your expectations. We help clients with personalized tax, accounting services and tax preparation. Reach out to us using one of the methods in the <a href="contact-us.php">contact us</a> page.
    
              </p>
    
              <div class="a_b-drpbtn" tabindex="0">
    
                <p>
                  Not only is it a legal obligation but knowing your financial position as a business is mandatory for growth and success.
                  <br><br>
                  We provide a range of services to assist you in reaching your financial goals. We ensure that we serve you beyond your expectations. We help clients with personalized tax, accounting services and tax preparation. Reach out to us using one of the methods in the <a href="contact-us.php">contact us</a> page.
    
                </p>
    
              </div>
    
              <div class="cr-drpbtn" tabindex="0">
    
                <p>
                  At BOS Consultants, we make it easy for you to register your company. With deals starting from R300.00 we are one of the cheapest in South Africa. We do all the paperwork for you leaving you with time to plan for your business.
                  <br><br>
                  Not only do we specialize in company registration, but depending what you want us to do for you, we also register your company in relevant databases and authorities that regulate the field you are in keeping you safe from the law. <a href="contact-us.php">contact us</a> for more information.
                </p>
    
              </div>
    
              <div class="sheq-drpbtn" tabindex="0">
    
                <p>
                  We offer quality SHEQ services consultation services. We have well qualified staff members with some having more than 10 years of experience in the industries and with a proven track record of 5 star achievement scores with the National Occupation Safety Association (NOSA) with their previous teams. <br><br>
                  We offer various services including Compliance Audits, Risk Assessments, SHEQ Campaigns, SHEQ Plans and Policies, and etc (click <a href="sheq-services.php">here</a> to view our full list of safety services). Become our regular member and receive tips frequently on how to improve the Safety Culture in your organization. Register <a href="client-registration-form.php">here</a> to be considered a regular member.
                </p>
              </div>
    
              <div class="c-drpbtn" tabindex="0">
    
                <p>
                  Running a contract company is not so easy, you are always out there looking for a new business opportunity. Worrying about paperwork and expiring documents is the last thing you need, and that is why we are here.
                  <br><br>
                  At BOS Consultants, we take care of that last worry, if you become our Contractor services client, depending on what you need, We will keep your documentation up to date. We offer various services including CSD Registration, COID Registration, NCCA, CIDB and etc. (for a full list visit our <a href="contractor-.php">Contractor Service</a> list). Additionally, we also support small businesses an opportunity to succeed by posting tenders on our <a href="tender-bulletins">Tender Bulletins</a> page available for our regular clients to view free of charge, register <a href="client-registration-form.php">here</a> to be considered a regular member.
                </p>
              </div>
    
              <div class="m_m-drpbtn" tabindex="0">
    
                <p>
                  We offer different services which you can choose from depending on your preference. We offer logo designs, business plans and profiles, website management, custom email accounts, and etc (click <a href="marketing.php">here</a> to view our full list of Marketing Services). Become our regular member and receive direct emails on our latest offers and discounts. Register <a href="client-registration-form.php">here</a> to be considered a regular member.
                </p>
    
              </div>
    
            </div>
    
            <footer id="footer">
    
    
            </footer>
    
          </div>
    
    
        </body>

Solution

here you go

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"
      "footer footer footer footer";
  }

  /* Begin Dropdown Pricelist Settings*/

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

  /*style the dropdown button*/
  .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: "menu-1";
    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:hover .dropdown-content
  {
    display:block
  }

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

  /* style the container needed to position the dropdown content*/
  .drop-down {
    position: relative;
    display: inline-block;
    background-color: #790d76;
  }

  /*style the dropdown content*/

  .dropdown-content {
      display: none;
    position: absolute;
    background-color: #e2e5aa;
    min-width: 2;
    overflow: hidden;

  }

  /*style the dropdown content text*/

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

  /* END Dropdown Pricelist Settings */

  /* BEGIN Navigation Settings*/

  /*remove navigation default settings*/

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

  /* insert grid backgroung color*/

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

  /* make items float nect to each other*/

  #navigation li {
    float: left;
  }

  /* style the link display*/

  #navigation a {
    display: block;
    background-color: #790d76;
    padding: 4px;
    text-decoration: none;
    font-size: 15px;
    color: #e2e5aa;
  }

  /* navigation on hover settings*/

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

  /* navigation on acive settings*/

  #navigation a:active {
    background-color: purple;
  }

  /* END Navigation Settings */

  /* BEGIN Client-Terminal Settings*/

  /* Remove default list settings*/

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

  /* style link item*/

  #client-terminal a {
    display: block;
    background-color: transparent;
    padding: 4px;
    text-decoration: none;
    font-size: 100%;
    text-align: right;
    color: #c8d32a;
  }

  /* client-terminal main background color*/

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

  /*style link on hover*/

  #client-terminal a:hover {
    background-color: #791575;
  }

  /* style link active*/

  #client-terminal a:active {
    background-color: #cc99ff;
  }

  /* END client-terminal settings*/

  /* Begin services dropdown Settings*/

  .dropdown-2-button:before {
    content: "menu2";
    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;
  }

  /* END services dropdown settings*/

  /* Begin footer settings*/

  /* END footer settings */

  /* BEGIN introduction settings*/

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

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

  #footer header {
    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%;
  }

  .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  Accounting and Bookkeeping Services";
    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;
    content: "\2191  Accounting and Bookkeeping Services";
  }

  .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  Contractors";
    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  Marketing and Management";
    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  Safety, Health and Environment";
    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  Company Registration";
    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: "menu1";
    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: "menu1";
    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: "menu1";
    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;
  }

  #client-terminal a {
    font-size: 20px;
  }

  #navigation a {
    font-size: 20px;
  }

  #client-terminal a:hover {
    background-color: #8f228c;
  }
}
<body>

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

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

        <li><a href="/index.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>
    <div id="services">

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

        <div class="dropdown-2" id="dropdown3">

          <a href="accountingandtax.php">Accounting and Tax</a>
          <a href="companyregistration.php">Company Registration</a>
          <a href="contractor.php">Contractors</a>
          <a href="sheq.php">Safety, Health, Quality and Quality</a>
          <a href="marketingandmanagement.php">Marketing and Management</a>
        </div>

      </div>
    </div>

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

        <div class="dropdown-content">
          <a href="accounting-and-tax-pricelist.php"> Accounting and Tax</a>
          <a href="company-registration-pricelist.php">Company Registration</a>
          <a href="contractor-pricelist.php">Contractor</a>
          <a href="sheq-pricelist.php">SHEQ</a>
          <a href="marketing-and-management.php">Marketing and Management</a>
        </div>
      </div>

    </div>

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

      <sub-heading>Accounting and Taxation</sub-heading>
      <p style="font-weight: normal;">
        Not only is it a legal obligation but knowing your financial position as a business is mandatory for growth and success.
        <br><br>
        We provide a range of services to assist you in reaching your financial goals. We ensure that we serve you beyond your expectations. We help clients with personalized tax, accounting services and tax preparation. Reach out to us using one of the methods in the <a href="contact-us.php">contact us</a> page.

      </p>

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

        <p>
          Not only is it a legal obligation but knowing your financial position as a business is mandatory for growth and success.
          <br><br>
          We provide a range of services to assist you in reaching your financial goals. We ensure that we serve you beyond your expectations. We help clients with personalized tax, accounting services and tax preparation. Reach out to us using one of the methods in the <a href="contact-us.php">contact us</a> page.

        </p>

      </div>

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

        <p>
          At BOS Consultants, we make it easy for you to register your company. With deals starting from R300.00 we are one of the cheapest in South Africa. We do all the paperwork for you leaving you with time to plan for your business.
          <br><br>
          Not only do we specialize in company registration, but depending what you want us to do for you, we also register your company in relevant databases and authorities that regulate the field you are in keeping you safe from the law. <a href="contact-us.php">contact us</a> for more information.
        </p>

      </div>

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

        <p>
          We offer quality SHEQ services consultation services. We have well qualified staff members with some having more than 10 years of experience in the industries and with a proven track record of 5 star achievement scores with the National Occupation Safety Association (NOSA) with their previous teams. <br><br>
          We offer various services including Compliance Audits, Risk Assessments, SHEQ Campaigns, SHEQ Plans and Policies, and etc (click <a href="sheq-services.php">here</a> to view our full list of safety services). Become our regular member and receive tips frequently on how to improve the Safety Culture in your organization. Register <a href="client-registration-form.php">here</a> to be considered a regular member.
        </p>
      </div>

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

        <p>
          Running a contract company is not so easy, you are always out there looking for a new business opportunity. Worrying about paperwork and expiring documents is the last thing you need, and that is why we are here.
          <br><br>
          At BOS Consultants, we take care of that last worry, if you become our Contractor services client, depending on what you need, We will keep your documentation up to date. We offer various services including CSD Registration, COID Registration, NCCA, CIDB and etc. (for a full list visit our <a href="contractor-.php">Contractor Service</a> list). Additionally, we also support small businesses an opportunity to succeed by posting tenders on our <a href="tender-bulletins">Tender Bulletins</a> page available for our regular clients to view free of charge, register <a href="client-registration-form.php">here</a> to be considered a regular member.
        </p>
      </div>

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

        <p>
          We offer different services which you can choose from depending on your preference. We offer logo designs, business plans and profiles, website management, custom email accounts, and etc (click <a href="marketing.php">here</a> to view our full list of Marketing Services). Become our regular member and receive direct emails on our latest offers and discounts. Register <a href="client-registration-form.php">here</a> to be considered a regular member.
        </p>

      </div>

    </div>

    <footer id="footer">

    </footer>

  </div>

</body>

Answered By – The Duo

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.