悬停效果不显示在两个菜单项上

时间:2018-02-14 07:09:18

标签: html css

除非光标触及项目的顶部,否则我的前两个导航菜单项上不会显示我的悬停效果。除非光标触及项目顶部,否则我无法点击前两项。对于其他三个项目,悬停效果正常工作,并在光标触及项目底部时显示。我一直在乱搞这个,我知道我做了些什么搞乱它,但我无法弄清楚是什么。一切都运转良好。感谢您对此的任何帮助!

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;">&nbsp;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&#x25BE;</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>​

0 个答案:

没有答案