Hover Effect Not Showing Up on Two Menu Items - html

Question

My hover effect is not showing up on my first two nav menu items unless the cursor touches the top of the item. I can't click on the first two items at all unless the cursor touches the top of the item. For the other three items, the hover effect is working properly and will show up when the cursor touches the bottom of the item. I've been mucking around with this and I know I did something to mess it up, but I can't figure out what. Everything worked fine before. Thank you for any help with this!
nav {
width: 450px;
margin-top: 1em;
float: right;
}
nav ul {
font-family: Arial, sans-serif;
font-size: .80em;
list-style: none;
text-align: right;
width: 100%;
margin: 0;
padding: 2% 0;
float: right;
}
nav ul ul {
width: 244px;
margin-top: 1.1%;
padding: 0;
position: absolute;
border-bottom: none;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .25s ease-in;
-o-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-webkit-transition: all .25s ease-in;
}
nav ul li:hover ul {
display: block;
border-top: none;
visibility: visible;
opacity: 1;
}
nav ul li { display: inline-block; text-align: left; }
nav ul li:nth-of-type(1) { width: 65px; }
nav ul li:nth-of-type(2) { width: 60px; }
nav ul li:nth-of-type(3) { width: 90px; }
/*Make link stay a certain color when hovered over and left*/
nav ul li:nth-of-type(3):hover > a { color: white; }
nav ul li:nth-of-type(3).current > a { color: white; }
nav ul li:nth-of-type(4) { width: 75px; }
nav ul li:nth-of-type(5) { width: 80px; text-align: right; }
nav ul li a {
color: silver;
font-size: .90em;
font-weight: bold !important;
text-decoration: none;
text-align: left;
}
nav ul li a.active-link {
color: white;
border-bottom: 1px solid #dad700;
}
nav ul li a:hover, nav ul li a.current {
color: white;
border-bottom: 1px solid #dad700;
}
nav ul li li {
background-color: #182248;
font-size: 1.2em !important;
text-align: left;
width: 100%;
display: block;
float: left;
}
nav ul li li:nth-of-type(1) {
width: 98%;
padding: 18px 0 20px 12px;
border-left: thin solid #696969;
border-right: thin solid #696969;
border-top: thin solid #696969;
}
nav ul li li:nth-of-type(2) {
width: 98%;
padding: 12px 0 20px 12px;
border-left: thin solid #696969;
border-right: thin solid #696969;
}
nav ul li li:nth-of-type(3) {
width: 98%;
padding: 12px 0 20px 12px;
border-left: thin solid #696969;
border-right: thin solid #696969;
border-bottom: thin solid #696969;
}
nav ul li li a {
color: silver;
font-size: .90em;
border: none;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
cursor: pointer;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] { display: none; }
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { display: block; }
​
<nav>
<label for="show-menu" class="show-menu"><img src="img/buggy.png" alt="Buggy Silhouette" style="position: relative; top: .25em;"> Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>What's Up▾
<ul class="hidden">
<li>Meetings</li>
<li>Upcoming Events</li>
<li>Buggies & Bits</li>
</ul>
</li>
<li>Membership</li>
<li>Contact</li>
</ul>
</nav>​