这是我放在一起的导航菜单的一部分。我试图找出如何从中创建子菜单。我遇到的问题是,当您将鼠标悬停在Submenu div上时,.dropdown-subcontent会在右侧显示,但是在其下有空白,好像它也应该显示在下方。
我已经尝试过.dropdown-subcontent div上的每个位置和显示属性,但是都没有影响悬停在Submenu链接上的空白。
.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>
答案 0 :(得分:2)
您应在此处将position: absolute
用于.dropdown-subcontent
,以免影响其他块:
.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>