List hover not activating - html

Question

I'm trying to get a menu to appear when hovering over the image, but for some reason it's not appearing. (I'm making it mobile adaptive so the navigation links appear in a hover menu when the browser window is smaller)
Can someone help me figure out why the css rule 'ul.nav-menu:hover' hover isn't working?
#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>
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Answer 1

When you hover #header-nav-menu, you want the .nav-menu that comes after it to display. This will do it.
#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">
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>

Answer 2

I would say you want to nav:hover ul { display: block; } so if your mouse is over the <nav> then the menu is visible. Then it's is better possible to click on a menu item.
#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>
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>