Vertical submenu when moushover-ing on the horizontal main menu

Question

My menu is horizontal .. i'm trying to make the submenu that consists of "Book n appointment" and "cancel an appointment appears when the mouse is over "book/cancel appointment" but it's not working fine. Here is my code:

.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

According to your code what you need is make your submenu be absolute positioned and with that you can avoid affect the other elements. Try this:

.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>