Responsive Dropdown Menu Query
Having a minor problem with a dropdown menu in trying to make it responsive for smaller device screens, I have managed to get the initial ul li items to stack vertically when the screen does not allow the space horizontally, however I cannot seem to work out how to get the dropdown options (ul li ul li) to display without being blocked by the initial top level ul li, which don't seem to budge down to allow them to be seen.
Picture examples of problem - image of same menu option hovered over on both screen sizes:
PC:
Mobile:
HTML
<div id="navbar"> <nav>
<meta charset="utf-8"> <ul data-options="disableHover:true; clickOpen:true"> <li><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li> <li><a>Rehearsals</a> <ul> <li><a href="https://uklivesound.000webhostapp.com/liveroom.html" class="sub">Live Room</a></li> <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html" class="sub">Isolation Room</a></li> </ul> </li> <li><a>For Hire</a> <ul> <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html" class="sub">Event Packages</a></li> <li><a href="https://uklivesound.000webhostapp.com/largeevents.html" class="sub">Large Events</a></li> <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html" class="sub">Equipment</a></li> <li><a href="https://uklivesound.000webhostapp.com/bandhire.html" class="sub">Bands</a></li> </ul> </li> <li><a>Recording</a> <ul> <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html" class="sub">Audio</a></li> <li><a href="https://uklivesound.000webhostapp.com/videorecording.html" class="sub">Video</a></li> </ul> </li> <li><a>Other Services</a> <ul> <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html" class="sub">Buy/Sell</a></li> <li><a href="https://uklivesound.000webhostapp.com/repairs.html" class="sub">Repairs</a></li> </ul> </li> <li><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li> </ul> </nav>
</div>
CSS
#navbar * {
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:0;
position: relative;
z-index:9999;
max-width:100%;
height:50px;
margin-top:0px;
}
nav ul { list-style:none;
z-index:9999;
position:relative;
}
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;
z-index:9999;
border:1px solid white;
padding:0;
}
nav ul li:hover {
background-color:white;
transition-duration:0.5s;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
cursor:pointer;
text-decoration:none;
z-index:9999;
}
nav a {
display:block;
height:100%;
font-family:'Impact', sans-serif;
font-size:2em;
color:white;
text-decoration:none;
color:white;
position: relative;
z-index:9999;
}
nav ul li ul {display:none;
z-index:9999;
position:relative;
}
nav ul li:hover ul {display:block;
z-index:9999;
}
nav ul li:hover :first-child:not(.sub) {color:black;
text-decoration:none;
z-index:9999;}
nav ul li ul li {
float:none;
width:100%;
z-index:9999;
position:relative;
}
li > a:after { content: ' ⬎'; }
li > a:only-child:after { content: ''; }
nav .sub:hover {color:black;
text-decoration:none;
z-index:9999; }
@media only screen and (min-width: 260px) and (max-width: 768px) {
nav {
position: relative;
width:100%;
}
nav:not( :target ) > a:first-of-type,
nav:target > a:last-of-type {
display: block;
}
nav:target > ul
{
display: block;
}
nav ul li {
width: 100%;
}
nav li ul {
position: static;
display:block;
}
AdChoices