I'm trying to create a dropdown menu but currently having some problems:

1. The sub-menu disappears instantly when not hovering over the link (You can still hover over the sub-menu but it works on random)
2. The sub-menu only stay in a fixed position
3. Hovering over a sub-menu link doesn't highlight the whole row

Here is the CodePen link

Code snippet:

/*Header*/
.container {
  width: 100%;
  height: 900px;
  margin-bottom: 10px;
}
.banner {
  width: 100%;
}
marquee {
  background-color: red;
  font-size: larger;
  font-weight: bold;
  color: white;
  height: 50px;
  line-height: 50px;
  margin: 0;
}
/*Navigation*/
.nav {
  display: inline;
  margin: 0 20px;
}
.nav > a {
  text-decoration: none;
  color: darkblue;
  font-size: xx-large;
  font-weight: bold;
}
nav {
  text-align: center;
  background-color: white;
  height: 50px;
  line-height: 50px;
  color: darkblue;
  font-size: xx-large;
  font-weight: bold;
}
ul{
  margin: 0;
}
.navbar>ul>li{
  position: relative;
}
.navbar > a:hover{
  display: block;
  }
.sub-menu{
  display: none;
  position: absolute;
  z-index: 1;
  left: 5px;
}
.sub-menu>ul{
  list-style-type: none;
}
.sub-menu >ul> li:hover {
  background-color: orangered;
  color: yellow;
  border-radius: 10px;
  border: solid 1px;
}
.navbar>ul > li:hover > .sub-menu {
  display: block;
  background-color: white;
  margin: 0;
  z-index: 9;
  width: 300px;
  height: 100px;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  list-style-type: none;
  text-align: left;
}

  <div >
    <header>
      <img  src="Images/banner.png" alt="banner" />
      <marquee scrollamount="20" behavior="scroll" direction="left">Welcome
      </marquee>
    </header>
    <nav>
      <div >
        <ul>
          <li ><a href="#">Home </a></li>
          |
          <li ><a href="#">Intro </a>
            <div >
            <ul>
              <li><a href=""></a>Members</li>
              <li><a href=""></a>Library</li>
            </ul>
          </div>
          </li>
          |
          <li ><a href="#">Contact </a>
          </li>
          |
          <li ><a href="#">Help </a></li>
          |
          <li ><a href="#">Q&A </a></li>
        </ul>
      </div>
    </nav>
    

CodePudding user response：

1. This wasn't happening to me with your snippet, do you mean you want the submenu to stay if the cursor is taken completely off? You did seem to have a gap between the nav item and the submenu which could lose focus when moving the cursor slowly.
2. I've changed your height to min-height so that its height can grow with its contents. If you want it to follow the cursor you'll probably need JavaScript.
3. UA styling for the ul element has some default left padding, I've swapped it out for padding: .5em.

Here is a working snippet:

/*Header*/
.container {
  width: 100%;
  height: 900px;
  margin-bottom: 10px;
}
.banner {
  width: 100%;
}
marquee {
  background-color: red;
  font-size: larger;
  font-weight: bold;
  color: white;
  height: 50px;
  line-height: 50px;
  margin: 0;
}
/*Navigation*/
.nav {
  display: inline;
  margin: 0 20px;
}
.nav > a {
  text-decoration: none;
  color: darkblue;
  font-size: xx-large;
  font-weight: bold;
}
nav {
  text-align: center;
  background-color: white;
  height: 50px;
  line-height: 50px;
  color: darkblue;
  font-size: xx-large;
  font-weight: bold;
}
ul{
  margin: 0;
}
.navbar>ul>li{
  position: relative;
}
.navbar > a:hover{
  display: block;
  }
.sub-menu{
  display: none;
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  background-color: white;
  margin: 0;
  width: 300px;
  min-height: 100px;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  list-style-type: none;
  text-align: left;
}
.sub-menu>ul{
  list-style-type: none;
  padding: .5em;
}
.sub-menu >ul> li:hover {
  background-color: orangered;
  cursor: pointer;
  color: yellow;
  border-radius: 10px;
  outline: solid 1px;
}
.navbar>ul > li:hover > .sub-menu {
  display: block;
}

<div >
    <header>
      <img  src="Images/banner.png" alt="banner" />
      <marquee scrollamount="20" behavior="scroll" direction="left">Welcome
      </marquee>
    </header>
    <nav>
      <div >
        <ul>
          <li ><a href="#">Home </a></li>
          |
          <li ><a href="#">Intro </a>
            <div >
            <ul>
              <li><a href=""></a>Members</li>
              <li><a href=""></a>Library</li>
            </ul>
          </div>
          </li>
          |
          <li ><a href="#">Contact </a>
          </li>
          |
          <li ><a href="#">Help </a></li>
          |
          <li ><a href="#">Q&A </a></li>
        </ul>
      </div>
    </nav>