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

您可以在媒体查询中使用display：block！important，在较小的屏幕上显示您的子菜单。

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

在媒体查询期间删除在子菜单上的悬停

1 个答案: