remove hover on submenu during media query - html

Question

Im trying to remove the hover on my submenu when the media query is active. Right now it works how I want above 979px which displays the submenu on hover. However, at 979px and below the menu changes. Im trying to get the submenu to always display and can't seem to figure it out. there is a link attached to the services button so when its pressed to display the submenu you are re-directed whcih is why I want to display the submenu all the time at media query.
HTML:
<!-- Nav Bar -->
<div id="navbar">
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu" class="nav">
<li class="nav active">Home</li>
<li class="nav">
Services
<ul class="nav hidden">
<li>Fire Alarm Systems</li>
<li>Security & Intrusion</li>
<li>Closed Circuit TV</li>
<li>Access Control</li>
<li>Systems Intrigation</li>
</ul>
</li>
<li class="nav">About Us</li>
<li class="nav">Tech Support</li>
<li class="nav">Photo Gallery</li>
<li class="nav">Testimonials</li>
<li class="nav">Contact Us</li>
</ul>
</div>
<!-- Nav Bar End -->
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
li.nav
{ display:inline-block;
float: left;
margin-right: 2px;}
li.nav a {
display:block;
min-width:153px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #724e27;
text-decoration: none;
}
li.nav:hover a {
background: #cccccc;
color: #2f3036;
}
li.nav:hover ul a {
background: #f3f3f3; /* Light grey */
color: #2f3036; /* dark Grey */
height: 40px;
line-height: 40px;
}
li.nav:hover ul a:hover {
background: #996633; /* Light Brown */
color: #fff;
}
li.active a, li.active a:hover
{ background: #cccccc;
color: #2f3036;}
li.nav ul {
display: none;
}
li.nav ul li {
display: block;
float: none;
}
li.nav ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #261a0d;
background: #f3f3f3;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{display: none;}
input[type=checkbox]:checked ~ #menu{display: block;}
/* Responsive Styles */
#media screen and (max-width : 979px){
ul.nav
{ position: static;
display: none;}
li.nav {margin-bottom: 1px;}
ul.nav li, li.nav a {width: 100%;}
.show-menu {display:block;}
}

Answer 1

you can use display: block !important inside your media query to display your sub-menu on smaller screen.
#media screen and (max-width : 979px){
li.nav > ul.hidden {
display: block !important;
}
}