html - 导航子菜单创建空白

这是我放在一起的导航菜单的一部分。我想弄清楚如何从中创建子菜单。我遇到的问题是，当您将鼠标悬停在 Submenu div 上时，.dropdown-subcontent 会显示在右侧，但它下面有空白，就好像它也应该显示在下面一样。

我已经尝试了 .dropdown-subcontent div 上的每个位置和显示属性，但没有任何东西影响将鼠标悬停在子菜单链接上时出现的空白区域。

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

最佳答案

.dropdown-subcontent 这里应该使用position: absolute，这样不会影响其他 block :

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

关于html - 导航子菜单创建空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53049180/

html - 导航子菜单创建空白

上一篇：html - 使外部 div 适合内部 div 文本

下一篇：html - 单击按钮时如何更改容器的不透明度？