メディアクエリ中にサブメニューのホバーを削除する

Question

メディアクエリがアクティブなときにサブメニューのホバーを削除しようとしています。今は、979px以上でホバー上のサブメニューを表示する方法を動作させます。しかし、979px以下ではメニューが変わります。私はいつも表示するサブメニューを取得しようとすると、それを把握するように見えることはできません。サービスボタンにリンクが付いているので、サブメニューを表示するために押されたときにリダイレクトされているので、メディアクエリで常にサブメニューを表示したいのです。

HTML：

<!-- Nav Bar --> 
    <div id="navbar"> 
    <label for="show-menu" class="show-menu">Menu &#9776;</label> 
    <input type="checkbox" id="show-menu" role="button"> 
     <ul id="menu" class="nav"> 
     <li class="nav active"><a href="http://adanburlington.com/giotto2/index.html">Home</a></li> 
     <li class="nav"> 
      <a href="http://adanburlington.com/giotto2/services.html">Services</a> 
      <ul class="nav hidden"> 
       <li><a href="#">Fire Alarm Systems</a></li> 
       <li><a href="#">Security & Intrusion</a></li> 
       <li><a href="#">Closed Circuit TV</a></li> 
       <li><a href="#">Access Control</a></li> 
       <li><a href="#">Systems Intrigation</a></li> 
      </ul> 
     </li> 
     <li class="nav"><a href="http://adanburlington.com/giotto2/about.html">About Us</a></li> 
     <li class="nav"><a href="https://skyfex.com/client/" target="blank">Tech Support</a></li> 
     <li class="nav"><a href="#">Photo Gallery</a></li> 
     <li class="nav"><a href="#">Testimonials</a></li> 
     <li class="nav"><a href="http://adanburlington.com/giotto2/contact.html">Contact Us</a></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

あなたが使用できるディスプレイ：！ブロックの重要なあなたのメディアクエリ内の小さい画面でサブメニューを表示します。

@media screen and (max-width : 979px){ 
    li.nav > ul.hidden { 
     display: block !important; 
    } 
}