In this CSS code snippet I have used the checkbox to control the toggle functionality of the dropdown menu.
CSS only dropdown toggle with cross browser combability
<div class="dropdown">
<input type="checkbox" class="dropdown-trigger">
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
body{
background:#f8f8f8;
box-sizing:border-box;
font-family:sans-serif;
font-size:1em;
}
.dropdown{
position: relative;
display: inline-flex;
}
.dropdown-menu{
background: #fff;
border-radius: 8px;
box-shadow: 1px 3px 12px 3px rgba(0,0,0,.01);
list-style: none;
min-width: 170px;
margin: 0;
padding: 0;
position: absolute;
top: calc(100% + 1px);
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all .3s ease;
}
.dropdown-menu li:last-child{
margin:0;
}
.dropdown-menu li a{
color:#000;
display:block;
padding:8px 15px;
text-decoration:none;
transition:all .3s ease;
}
.dropdown-menu li a:hover{
background:yellow;
}
.dropdown-trigger{
appearance:none;
-webkit-appearance:none;
margin:0;
}
.dropdown-trigger:before{
content:'';
background-color:#fff;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-2.4 -2.4 28.80 28.80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-width='0'/%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke='%23000' stroke-width='0.9120000000000001'/%3E%3Cg%3E%3Cpath d='M4 17H20M4 12H20M4 7H20' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
background-size:100%;
background-position:center;
border:1px solid #e6e6e6;
border-radius:3px;
box-sizing:border-box;
cursor:pointer;
display:block;
padding:10px;
height:32px;
width:40px;
}
.dropdown-trigger:checked + .dropdown-menu{
opacity:1;
visibility:visible;
}