除非光标触及项目的顶部,否则我的前两个导航菜单项上不会显示我的悬停效果。除非光标触及项目顶部,否则我无法点击前两项。对于其他三个项目,悬停效果正常工作,并在光标触及项目底部时显示。我一直在乱搞这个,我知道我做了些什么搞乱它,但我无法弄清楚是什么。一切都运转良好。感谢您对此的任何帮助!
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><a href="index.html" class="active-link">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="what's-up.html">What's Up▾</a>
<ul class="hidden">
<li><a href="meetings.html">Meetings</a></li>
<li><a href="upcoming-events.html">Upcoming Events</a></li>
<li><a href="buggies-bits.html">Buggies & Bits</a></li>
</ul>
</li>
<li><a href="membership.html">Membership</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>