Question

我目前正在为网站制作导航栏，但我在使用子菜单时遇到了问题。我已经弄清楚如何将子菜单放在相对于它的父级ul的位置，但是我很难让子菜单消失，直到用户将鼠标悬停在父级上面。

所以当我将鼠标悬停在＆＃34;危机和支持＆＃34;我希望在我将鼠标悬停在＆＃34;资源＆＃34;之前不要看到辅助子菜单。标签。任何人都可以帮助弄清楚我做错了什么？

这是[实例] [1]

＆＃13;

/* Navigation Bar */


/* Styles color and interaction, as well as continuous position on scroll. */

.nav {
  position: relative;
  color: white;
  background: -webkit-linear-gradient(#182B52, #1D355E);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#182B52, #1D355E);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#182B52, #1D355E);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#182B52, #1D355E);
  /* Standard syntax (must be last) */
  box-shadow: 0 0 10px 0px black;
  position: -webkit-sticky;
  z-index: 1;
}

.nav button {
  padding: 10px;
  background: #182B52;
  color: white;
  border-style: solid;
  border-top-style: none;
  border-color: white;
  border-width: 1px;
  margin-left: 47%;
  margin-bottom: 15px;
}

.nav button:hover {
  background: #D3B663;
}

.nav-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.nav ul li {
  display: inline-block;
}

.nav ul li:hover {
  background-color: #1D355E;
}

.nav ul li a,
visited {
  color: white;
  display: block;
  padding: 15px;
  text-decoration: none;
}

.nav ul li a:hover {
  color: white;
  text-decoration: none;
}

.nav ul li:hover ul {
  display: block;
}

.nav ul ul {
  display: none;
  position: absolute;
  background-color: rgba(29, 53, 94, .75);
}

.nav ul ul li {
  display: block;
  text-align: left;
}

.nav ul ul li a,
visited {
  color: white;
}

.nav ul ul li a:hover {
  color: #D3B663;
  display: block;
}

.nav ul.submenu {
  display: none;
  position: absolute;
  left: 153px;
  top: 147px;
  width: 150px;
  text-align: center;
}

.nav ul.submenu li {
  text-align: left;
  color: white;
}

.nav li:hover ul.submenu:hover {
  color: #D3B663;
  display: block;
}

.nav-wrapper img {
  float: right;
  height: 75px;
  padding-right: 70px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.nav form {
  position: absolute;
  right: 0;
  padding-right: 75px;
  margin-top: -18px;
}

.nav input {
  border: solid;
  border-color: white;
  border-width: 1px;
  color: white;
  background-color: #182B52;
  padding: 6px;
  padding-top: 8px;
}

.nav input:hover {
  background: #1D355E;
}

＆＃13;

<!-- Navigation Bar -->
<div class="nav">


  <!-- Quick Close -->
  <button id="get-away">QUICK CLOSE</button>


  <!-- Search Bar 
			<form action="./search.php" method="get">
				<input type="text" name="input" size="40px"/>
				<input type="submit" value="SEARCH"/>
			</form> -->


  <!-- Sticky Navigation -->
  <div class="nav-wrapper">
    <ul>
      <li>
        <a href="#">ABOUT US</a>
        <ul>
          <li><a href="story.html">OUR HER-STORY</a></li>
          <li><a href="why.html">WHY A WOMEN'S CENTER?</a></li>
          <li><a href="space.html">LEARN ABOUT OUR SPACE</a></li>
          <li><a href="staff.html">MEET OUR STAFF</a>
            <li><a href="contact.html">CONTACT US</a></li>
        </ul>
        </li>
        <li>
          <a href="#">CRISIS &amp; SUPPORT</a>
          <ul>
            <li><a href="find.html">FIND COMMUNITY</a></li>
            <li><a href="rights.html">BASIC RIGHTS</a></li>
            <li><a href="health.html">HEALTH</a></li>
            <li><a href="/resources/index.html">RESOURCES FOR</a></li>
            <ul class="submenu">
              <li><a href="#">Category 1</a></li>
              <li><a href="#">Category 2</a></li>
              <li><a href="#">Category 3</a></li>
              <li><a href="#">Category 4</a></li>
              <li><a href="#">Category 5</a></li>
            </ul>
        </li>
        <li><a href="educators.html">FOR EDUCATORS</a></li>
        </ul>
      </li>
      <li>
        <a href="#">GET INVOLVED</a>
        <ul>
          <li><a href="#">VOLUNTEER</a></li>
          <li><a href="#">JOIN PEER EDUCATION</a></li>
          <li><a href="#">BECOME A SAGE AFFILIATE</a></li>
          <li><a href="https://docs.google.com/a/ucdavis.edu/forms/d/1vr13pZ7HJbTwOKo3x_mCj3R0Hctt7Y7Bi-TgLun2oJA/viewform">GET WRRC UPDATES</a></li>
          <li><a href="#">STUDENT STAFF POSITIONS</a></li>
        </ul>
      </li>
      <li>
      </li>
    </ul>
  </div>
</div>

＆＃13;

感谢您的时间！

Answer 1

在样式表（第72行）上更改

.nav ul li:hover ul { display: block; }

到

.nav ul li:hover > ul { display: block; }

您还有一个不正确嵌套的子菜单。 “Resources For”的结束标记应该在子菜单之后 - 你可能知道。

Codepen： http://codepen.io/SteveClason/pen/oxRyxY

如何隐藏子菜单，直到它被鼠标悬停

1 个答案: