Unable to position expanding lists relative to their parent on a horizontal navigation bar-CodePudding

I'm attempting to create an expanding list that drops relative to the parent's position.

I currently have the position to absolute which lines the lists up incorrectly.

When I switch it to relative positioning, I receive my desired result but I have a weird space on my lists, this is what I get

my desired result without the space

is it possible to keep the positioning but remove the space it creates?

thanks guys

Here is my code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-image: url(images/background.png);
}

nav {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}

nav ul {
  position: relative;
  list-style-type: none;
}

nav ul li p {
  display: flex;
  align-items: center;
  font-family: arial;
  font-size: 1.1em;
  text-decoration: none;
  text-transform: capitalize;
  color: white;
  padding: 10px 30px;
  height: 50px;
  transition: .5s ease;
}

nav ul li p:hover {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

nav ul ul {
  position: absolute;
  left: 250px;
  width: 200px;
  top: 0;
  background: rgba(75, 136, 162, 0.9);
  border-radius: 5px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
  display: none;
}

nav ul span {
  position: absolute;
  right: 20px;
  font-size: 1.5em;
}

nav ul .dropdown {
  position relative;
}

nav ul .dropdown:hover>ul {
  display: inline-block;
}

nav ul .dropdown-two ul {
  position: relative;
  left: 200px;
  cursor: pointer;
}

nav ul .dropdown-two:hover ul {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="master.css">
  <title></title>
</head>

<body>
  <nav>
    <ul >
      <li >
        <p>Frozen Food<span>&rsaquo;</span></p>
        <ul>
          <li>
            <p>Hamburger Patties</p>
          </li>
          <li >
            <p>Fish Fingers<span>&rsaquo;</span></p>
            <ul >
              <li>
                <p>Fish Fingers (500 Grams)</p>
              </li>
              <li>
                <p>Fish Fingers (1000 Grams)</p>
              </li>
            </ul>
          </li>
      </li>

      <li>
        <p>Shelled Prawns</p>
      </li>
      <li >
        <p>Tub Ice Cream<span>&rsaquo;</span></p>
        <ul >
          <li>
            <p>Tub Ice Cream (1 Litre)</p>
          </li>
          <li>
            <p>Tub Ice Cream (2 Litre)</p>
          </li>
        </ul>
      </li>
      </ul>

      <li>
        <p>Fresh Food</p>
      </li>
      <li>
        <p>Beverages</p>
      </li>
      <li>
        <p>Home Health</p>
      </li>
      <li>
        <p>Pet Food</p>
      </li>
    </ul>
  </nav>
</body>

</html>

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
background-image: url(images/background.png);
}

nav {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}
nav ul {
  position: relative;
  list-style-type: none;
}

nav ul li p {
  display: flex;
  align-items: center;
  font-family: arial;
  font-size: 1.1em;
  text-decoration: none;
  text-transform: capitalize;
  color: white;
  padding: 10px 30px;
  height: 50px;
  transition: .5s ease;

}

nav ul li p:hover {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

nav ul ul {
  position:absolute;
  left: 250px;
  width: 200px;
  top: 0;
  background: rgba(75, 136, 162, 0.9);
  border-radius: 5px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
  display: none;
}

nav ul span {
  position: absolute;
  right: 20px;
  font-size: 1.5em;
}

nav ul .dropdown {
  position relative;
}

nav ul .dropdown:hover > ul {
  display: inline-block;
}

nav ul .dropdown-two ul{
  position: relative;
  left: 200px;
  cursor: pointer;
}

nav ul .dropdown-two:hover ul {
  display: inline-block;
}

CodePudding user response：

Make your dropdown-two relative and remove the relative from your dropdown-two ul and give it top 100%:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-image: url(images/background.png);
}

nav {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}

nav ul {
  position: relative;
  list-style-type: none;
}


nav ul li p {
  display: flex;
  align-items: center;
  font-family: arial;
  font-size: 1.1em;
  text-decoration: none;
  text-transform: capitalize;
  color: white;
  padding: 10px 30px;
  height: 50px;
  transition: .5s ease;
}

nav ul li p:hover {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

nav ul ul {
  position: absolute;
  left: 250px;
  width: 200px;
  top: 0;
  background: rgba(75, 136, 162, 0.9);
  border-radius: 5px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
  display: none;
}

nav ul span {
  position: absolute;
  right: 20px;
  font-size: 1.5em;
}

nav .dropdown-two {
  position: relative;
}

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

nav ul .dropdown-two ul {
  top: 100%;
  left: 200px;
  cursor: pointer;
}

nav ul .dropdown-two:hover ul {
  display: inline-block;
}

<nav>
  <ul >
    <li >
      <p>Frozen Food<span>&rsaquo;</span></p>
      <ul>
        <li>
          <p>Hamburger Patties</p>
        </li>
        <li >
          <p>Fish Fingers<span>&rsaquo;</span></p>
          <ul >
            <li>
              <p>Fish Fingers (500 Grams)</p>
            </li>
            <li>
              <p>Fish Fingers (1000 Grams)</p>
            </li>
          </ul>
        </li>
        <li>
          <p>Shelled Prawns</p>
        </li>
        <li >
          <p>Tub Ice Cream<span>&rsaquo;</span></p>
          <ul >
            <li>
              <p>Tub Ice Cream (1 Litre)</p>
            </li>
            <li>
              <p>Tub Ice Cream (2 Litre)</p>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <p>Fresh Food</p>
    </li>
    <li>
      <p>Beverages</p>
    </li>
    <li>
      <p>Home Health</p>
    </li>
    <li>
      <p>Pet Food</p>
    </li>
  </ul>
</nav>

As an aside, I have also fixed your html - you had a closing li in the wrong position

Also not sure why you want to position the menu under the item you are hovering as you cannot hover onto that slide out and if your second menu doesn't reach the item you are hovering in the main menu, you will also have the same issue of it disappearing when you try to your mouse from the li to the sub menu.

This is how I would do it - makes for a much better user experience

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-image: url(images/background.png);
}

nav {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}

nav ul {
  list-style-type: none;
}

nav li {
  position: relative;
}


nav ul li p {
  display: flex;
  align-items: center;
  font-family: arial;
  font-size: 1.1em;
  text-decoration: none;
  text-transform: capitalize;
  color: white;
  padding: 10px 30px;
  height: 50px;
  transition: .5s ease;
}

nav ul li p:hover {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

nav ul ul {
  position: absolute;
  left: 250px;
  width: 200px;
  top: 0;
  background: rgba(75, 136, 162, 0.9);
  border-radius: 5px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
  display: none;
}

nav ul span {
  position: absolute;
  right: 20px;
  font-size: 1.5em;
}

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

nav ul .dropdown-two ul {
  left: 200px;
  cursor: pointer;
}

nav ul .dropdown-two:hover ul {
  display: inline-block;
}

<nav>
  <ul >
    <li >
      <p>Frozen Food<span>&rsaquo;</span></p>
      <ul>
        <li>
          <p>Hamburger Patties</p>
        </li>
        <li >
          <p>Fish Fingers<span>&rsaquo;</span></p>
          <ul >
            <li>
              <p>Fish Fingers (500 Grams)</p>
            </li>
            <li>
              <p>Fish Fingers (1000 Grams)</p>
            </li>
          </ul>
        </li>
        <li>
          <p>Shelled Prawns</p>
        </li>
        <li >
          <p>Tub Ice Cream<span>&rsaquo;</span></p>
          <ul >
            <li>
              <p>Tub Ice Cream (1 Litre)</p>
            </li>
            <li>
              <p>Tub Ice Cream (2 Litre)</p>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <p>Fresh Food</p>
    </li>
    <li>
      <p>Beverages</p>
    </li>
    <li>
      <p>Home Health</p>
    </li>
    <li>
      <p>Pet Food</p>
    </li>
  </ul>
</nav>