Dropdown Menu - Disappearing Act!
Hi guys,
Having a very minor problem with a dropdown menu in a website I am currently trying to construct - the vast majority is completely fine, there is just one of the dropdowns that disappears when I scroll the mouse down to the bottom option - the rest are all working nicely!
HTML and CSS code, plus screenshot below - The issue is regarding the 'Bands' option under the 'For Hire' menu.
HTML
<nav>
<div id="navbar">
<meta charset="utf-8">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Rehearsals</a>
<ul>
<li><a href="#" class="sub">Live Room</a></li>
<li><a href="#" class="sub">Isolation Room</a></li>
</ul>
</li>
<li><a href="#">For Hire</a>
<ul>
<li><a href="#" class="sub">Event Packages</a></li>
<li><a href="#" class="sub">Large Events</a></li>
<li><a href="#" class="sub">Equipment</a></li>
<li><a href="#" class="sub">Bands</a></li>
</ul>
</li>
<li><a href="#">Recording</a>
<ul>
<li><a href="#" class="sub">Audio</a></li>
<li><a href="#" class="sub">Video</a></li>
</ul>
</li>
<li><a href="#">Other Services</a>
<ul>
<li><a href="#" class="sub">Buy/Sell</a></li>
<li><a href="#" class="sub">Repairs</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
CSS
#navbar * {
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
position: relative;
bottom: 10%;
}
body {background-color:#79c5f4;}
nav ul { list-style:none;
}
li:nth-child(1) {background-color:#71aace;}
li:nth-child(2) {background-color:#6c73b1;}
li:nth-child(3) {background-color:#d3c530;}
li:nth-child(4) {background-color:#82c845;}
li:nth-child(5) {background-color:#8f65a1;}
li:nth-child(6) {background-color:#d84e92;}
li:nth-child(7) {background-color:#444080;}
nav ul li {
display:block;
float:left;
text-align:center;
width:16.667%;
position: relative;
}
nav ul li:hover {background-color:white;}
nav a {
display:block;
height:100%;
font-family:'Impact', sans-serif;
font-size:2.0vw;
color:white;
text-decoration:none;
color:white;
position: relative;
padding-bottom:20px;
}
nav ul li ul {display:none;}
nav ul li:hover ul {display:block;}
nav ul li:hover :first-child:not(.sub) {color:black;}
nav ul li ul li {
float:none;
width:100%;
position: relative;
}
nav .sub:hover {color:black;}
AdChoices