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: 0px8px16px0pxrgba(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: 0px8px16px0pxrgba(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-contenta {
  color: black;
  padding: 4px8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-contenta: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><htmllang="en"><head><title>Accounts Receivable</title><metacontent="width=device-width, initial-scale=1.0"name="viewport"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"crossorigin="anonymous"></head><bodybgcolor="#cccccc"><divclass='dropdown'><buttonclass='dropbtn'>MENU<iclass='fas fa-chevron-down'></i></button><divclass='dropdown-content'><ahref='#'>Option 1</a><divclass='dropdown2'><ahref='#'>Submenu ></a><divclass='dropdown-subcontent'><ahref='#'>Submenu Option 1</a><ahref='#'>Submenu Option 2</a><ahref='#'>Submenu Option 3</a></div></div><ahref='#'>Option 3</a></div></div></body></html>

You may like these posts

Post a Comment for "Navigation Submenu Creates White Space"