The main issue revolves around focus. Maintaining hover functionality for mobile while focusing on desktop is crucial.
UPDATED 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;
}
/*added for mobile*/
.my-dropdown:hover .dropdown-content {
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;
}
.drop-down {
position: relative;
display: inline-block;
background-color: #790d76;
}
.dropdown-content {
visibility: hidden;
position: absolute;
background-color: #e2e5aa;
overflow: hidden;
pointer-events: auto;
}
#navigation {
background-color: #790d76;
}
#client-terminal {
background-color: #290c28;
}
}
@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";
}
}
@media (min-width: 768px) {
.my-dropdown:focus .dropdown-content {
opacity: 1;
visibility: visible;
}
}
UPDATED HTML-
<div class="grid-container">
<div class="header" style="display: 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 AND CSS ERRORS ARE LISTED BELOW-
this should be - display: inline-block
<div class="header" style="display: inline-block"></div>
CSS errors corrected:
.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;
overflow: hidden;
pointer-events: auto;
}