Entfernen Sie den Mauszeiger über das Untermenü während der Medienabfrage

Question

Ich versuche, den Mauszeiger auf meinem Untermenü zu entfernen, wenn die Medienabfrage aktiv ist. Im Moment funktioniert es, wie ich über 979px will, das das Untermenü bei Hover anzeigt. Bei 979px und darunter ändert sich jedoch das Menü. Ich versuche, das Untermenü immer angezeigt zu bekommen und kann es nicht scheinen. Es gibt einen Link, der an die Dienste-Schaltfläche angehängt ist. Wenn er gedrückt wird, um das Untermenü anzuzeigen, werden Sie umgeleitet, weshalb ich das Untermenü ständig bei der Medienabfrage anzeigen möchte.

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

Sie können Display verwenden: Block wichtig in Ihrer Medienabfrage Ihre Untermenü auf kleineren Bildschirm angezeigt werden soll.

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