CODEWITHSUNDEEP
htmlcss
Robby
Robby

Reputation: 827

Navigation submenu creates white space

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 div, the .dropdown-subcontent appears as it should to the right, but there's white space under it, as if it should be displaying underneath as well.

I've tried what seems like every position and display property there is on the .dropdown-subcontent div, but nothing is affecting the white space that appears when hovering over the Submenu link.

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

.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 {
float: left;
    display: none;
    position: relative;
    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; left: 180px; top: -30px;}

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

Upvotes: 0

Views: 307

Answers (1)

extempl
extempl

Reputation: 3137

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>

Upvotes: 2

Related Questions