html - 在水平主菜单上鼠标悬停时的垂直子菜单

Question

我的菜单是水平的..我正在尝试制作包含“Book n appointment”和“当鼠标悬停在“book/cancel appointment”上时出现取消约会的子菜单，但它不能正常工作。这是我的代码:

.sousMenu:hover ul {
  display: block;
}
.sousMenu ul {
  top: 40px;
  display: none;
  list-style-type: none;
}
#nav {
  height: 25px;
  width: 744px;
  background-color: #fffacd;
  text-align: center;
  display: block;
  border-radius: 1em;
  position: relative;
  left: 160px;
  padding: 0;
  display: block;
}
#nav li {
  display: inline;
}
#nav li a {
  font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  text-decoration: none;
  /*float:center;*/
  padding: 10px;
  color: #a68b8b;
  font-family: arial;
}
#nav li:hover {
  background-color: #fff0d0;
  color: #dae067;
}
#nav li:active {
  background-color: #FFFFFF;
}
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}

<ul id="nav">
  <li>
    <a href="index.html">Home</a>

  </li>
  <li class="sousMenu"><a>Book/Cancel an appointment</a>
    <ul>
      <li><a href="book.html">Book an appointment</a>
      </li>
      <li><a href="cancel.html">Cancel an appointment</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="onlineshop.html">Online Shop</a>
  </li>
  <li>
    <a href="viewcatalogue.html">View Catalogue</a>
  </li>
  <li>
    <a href="aboutus.html">About us</a>
  </li>
  <li>
    <a href="contactus.html">Contact us</a>
  </li>
  <li>
    <a href="managerlogin.html">Manager log-in</a>
  </li>
</ul>
</div>

Answer 1

根据您的代码，您需要的是让您的子菜单绝对定位，这样您就可以避免影响其他元素。试试这个:

.sousMenu {
  position:relative;
  }
.sousMenu:hover ul {
  display: block;
  opacity:1;
}
.sousMenu ul {
  transition:1s ease;
  opacity:0;
  position:Absolute;
  top: 100%
  display: none;
  list-style-type: none;
}
#nav {
  height: 25px;
  width: 744px;
  background-color: #fffacd;
  text-align: center;
  display: block;
  border-radius: 1em;
  position: relative;
  left: 160px;
  padding: 0;
  display: block;
}
#nav li {
  display: inline;
}
#nav li a {
  font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  text-decoration: none;
  /*float:center;*/
  padding: 10px;
  color: #a68b8b;
  font-family: arial;
}
#nav li:hover {
  background-color: #fff0d0;
  color: #dae067;
}
#nav li:active {
  background-color: #FFFFFF;
}
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}

<ul id="nav">
  <li>
    <a href="index.html">Home</a>

  </li>
  <li class="sousMenu"><a>Book/Cancel an appointment</a>
    <ul>
      <li><a href="book.html">Book an appointment</a>
      </li>
      <li><a href="cancel.html">Cancel an appointment</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="onlineshop.html">Online Shop</a>
  </li>
  <li>
    <a href="viewcatalogue.html">View Catalogue</a>
  </li>
  <li>
    <a href="aboutus.html">About us</a>
  </li>
  <li>
    <a href="contactus.html">Contact us</a>
  </li>
  <li>
    <a href="managerlogin.html">Manager log-in</a>
  </li>
</ul>
</div>