Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Navigation Submenu Creates White Space

Post a Comment
This is part of a navigation menu I am putting together. I'm trying to figure out how to create submenus out of it. The problem I ran into is that when you hover over the Submenu d

Solution 1:

You should use position: absolute here for .dropdown-subcontent, so it won't affect other blocks:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown2 {
  position: relative;
}

.dropdownsub {
  position: absolute;
  display: hidden;
  background: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  left: 5px;
  font-size: 18px;
  letter-spacing: 0px;
  min-width: 180px;
}

.dropdown-subcontent {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  letter-spacing: 0px;
  min-width: 180px;
  background: orange;
}

@media (max-width: 1086px) {
  .dropdown-content {
    font-size: 17px;
  }
}

.dropdown-content a {
  color: black;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #cccccc;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown2:hover .dropdown-subcontent {
  display: inline-block;
}

.dropdownsub:hover .dropdown-subcontent {
  display: none;
}

.dropbtn:hover {
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Accounts Receivable</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

</head>

<body bgcolor="#cccccc">
  <div class='dropdown'>
    <button class='dropbtn'>MENU<i class='fas fa-chevron-down'></i></button>
    <div class='dropdown-content'>
      <a href='#'>Option 1</a>
      <div class='dropdown2'>
        <a href='#'>Submenu ></a>
        <div class='dropdown-subcontent'>
          <a href='#'>Submenu Option 1</a>
          <a href='#'>Submenu Option 2</a>
          <a href='#'>Submenu Option 3</a>
        </div>
      </div>
      <a href='#'>Option 3</a>
    </div>
  </div>






</body>

</html>

Post a Comment for "Navigation Submenu Creates White Space"