列表悬停未激活

Question

我正在尝试将鼠标悬停在图像上时显示一个菜单，但由于某种原因它没有出现。 （我正在使其具有移动自适应功能，因此当浏览器窗口较小时，导航链接会显示在悬停菜单中）

有人可以帮我弄清楚为什么css规则'ul.nav-menu：hover'悬停不起作用？

#header-nav-menu{
	display:hidden;
	width:44px;
	height:31px;
	background:url(https://animalcorner.co.uk/wp-content/uploads/2015/02/elephant-1-720x422.jpg) no-repeat;
	margin-left:50px;
}
#header-nav-menu a:hover{
	border-radius:4px 4px 0 0;
}

ul.nav-menu{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family: Montserrat, Helvetica, Arial, sans-serif;
	font-weight:100;
	color:#373436;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu a:link{
	color:#373436;
	text-decoration:none;
}
ul.nav-menu a:visited{
	color:#373436;
	text-decoration:none;
}
ul.nav-menu a:hover{
	color:#2778BA;
}


/* BELOW ADAPTS WITH SMALLER BROWSER WINDOW */
@media (max-width: 960px) {
ul.nav-menu, ul.nav-menu:active{
	display:none;
	z-index:999999999999999999999999999999999999;
	position:absolute;
	border:1px solid #f0f;
	border-radius: 2px 0 2px 2px;
}
#header-nav-menu{
	display:inline-block;
}

/* BELOW NOT WORKING */
ul.nav-menu:hover{
	display:block;
}
}

<nav>
   <a href="#" id="header-nav-menu"></a>
    <ul class="nav-menu">
    <li><a href="../services.html">Services</a></li>
    <li><a href="../about.html">About</a></li>
    <li><a href="../contact.html">Contact</a></li>
    </ul>
    
    </nav>

Answer 1

当您悬停#header-nav-menu时，您希望显示之后的.nav-menu。这样就可以了。

#header-nav-menu{
	display:hidden;
	width:44px;
	height:31px;
	background:url(https://animalcorner.co.uk/wp-content/uploads/2015/02/elephant-1-720x422.jpg) no-repeat;
	margin-left:50px;
}
#header-nav-menu a:hover{
	border-radius:4px 4px 0 0;
}

ul.nav-menu{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family: Montserrat, Helvetica, Arial, sans-serif;
	font-weight:100;
	color:#373436;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu a:link{
	color:#373436;
	text-decoration:none;
}
ul.nav-menu a:visited{
	color:#373436;
	text-decoration:none;
}
ul.nav-menu a:hover{
	color:#2778BA;
}
/* BELOW ADAPTS WITH SMALLER BROWSER WINDOW */
@media (max-width: 960px) {
ul.nav-menu, ul.nav-menu:active{
	display:none;
	z-index:999999999999999999999999999999999999;
	position:absolute;
	border:1px solid #f0f;
	border-radius: 2px 0 2px 2px;
}
#header-nav-menu{
	display:inline-block;
}

/* BELOW NOT WORKING */
ul.nav-menu:hover{
	display:block;
}
}

.wrap {
  display: inline-block;
}
.wrap:hover .nav-menu {
  display: block;
}

<nav>
  <div class="wrap">
    <a href="#" id="header-nav-menu"></a>
    <ul class="nav-menu">
      <li><a href="../services.html">Services</a></li>
      <li><a href="../about.html">About</a></li>
      <li><a href="../contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 2

我会说你想要nav:hover ul { display: block; }所以如果你的鼠标在<nav>之上，那么菜单是可见的。然后，最好点击一个菜单项。

#header-nav-menu{
	display:hidden;
	width:44px;
	height:31px;
	background:url(https://animalcorner.co.uk/wp-content/uploads/2015/02/elephant-1-720x422.jpg) no-repeat;
	margin-left:50px;
}
#header-nav-menu a:hover{
	border-radius:4px 4px 0 0;
}

ul.nav-menu{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family: Montserrat, Helvetica, Arial, sans-serif;
	font-weight:100;
	color:#373436;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu a:link{
	color:#373436;
	text-decoration:none;
}
ul.nav-menu a:visited{
	color:#373436;
	text-decoration:none;
}
ul.nav-menu a:hover{
	color:#2778BA;
}


/* BELOW ADAPTS WITH SMALLER BROWSER WINDOW */
@media (max-width: 960px) {
ul.nav-menu, ul.nav-menu:active{
	display:none;
	z-index:999999999999999999999999999999999999;
	position:absolute;
	border:1px solid #f0f;
	border-radius: 2px 0 2px 2px;
}
#header-nav-menu{
	display:inline-block;
}

/* BELOW NOW WORKING */
nav:hover ul{
	display:block;
}

<nav>
   <a href="#" id="header-nav-menu"></a>
    <ul class="nav-menu">
    <li><a href="../services.html">Services</a></li>
    <li><a href="../about.html">About</a></li>
    <li><a href="../contact.html">Contact</a></li>
    </ul>
    
    </nav>