【发布时间】：2021-05-21 04:13:10
【问题描述】：
我创建了一个下拉菜单。在这里，我的问题在投资组合部分。当我将鼠标悬停在投资组合上时，会出现一个下拉菜单。然后，当我将鼠标悬停在第一个下拉菜单文本上时，应该会出现另一个子下拉菜单，但是这里其他下拉菜单的所有子下拉菜单都一个一个出现。
另一个问题出在联系方式。在这里，问题是如果我在每个下拉菜单之间使用一个小的底部边距，然后将鼠标悬停在联系人文本上后，下拉图标出现，当我将鼠标从文本移动到下拉图标时，下拉菜单消失了。
这是我的完整代码：
/* menu part */
.menu {
text-align: center;
}
.menu ul {
list-style: none;
}
.menu ul li {
display: inline-block;
background: #545454;
color: white;
padding: 15px 55px;
margin-left: -5px;
border-left: 1px solid black;
font-family: 'Balsamiq Sans', cursive;
font-size: 18px;
position: relative;
}
.menu ul li i {
position: relative;
right: 10px;
}
.menu ul li:hover {
background-color: rgb(216, 49, 49);
transition: .8s;
cursor: pointer;
}
/* dropdown menu part */
/* contact part */
.menu ul li .contact {
position: absolute;
left: 38px;
top: 100%;
width: 0px;
display: inline-block;
padding: 0;
}
.menu ul li .contact li {
width: 0px;
display: inline-block;
line-height: 16px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
}
.menu ul li .contact li i {
font-size: 50px;
position: relative;
top: 0px;
right: 25px;
}
.menu ul li .contact li:first-child:hover {
background-color: royalblue;
}
.menu ul li .contact li:nth-child(2):hover {
background-color: rgb(190, 201, 37);
}
.menu ul li .contact li:nth-child(3):hover {
background-color: rgb(228, 22, 22);
}
.menu ul li .contact li:nth-child(4):hover {
background-color: rgb(1, 130, 250);
}
.menu ul li .contact li:last-child:hover {
background-color: rgb(66, 110, 241);
}
.menu ul li:hover ul li {
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaleY(1);
cursor: pointer;
}
/* portfolio part */
.menu ul li .portfolio {
position: absolute;
top: 100%;
left: 0px;
padding: 0;
margin-left: 5px;
}
.menu ul li .portfolio li {
width: 84px;
position: relative;
}
.menu ul li .portfolio li ul {
position: absolute;
left: 100%;
top: 0px;
padding: 0;
}
.menu ul li .portfolio li ul li {
visibility: hidden;
opacity: 0;
margin-left: 0px;
transform: scaleX(0);
transform-origin: center;
}
.menu ul li .portfolio li:hover ul li {
visibility: visible;
opacity: 1;
transform: scaleX(1);
transition: .8s;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<link rel="stylesheet" href="./dropdown menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-female"></i>About</li>
<li><i class="fas fa-user-edit"></i>Contact
<ul class="contact">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</li>
<li><i class="fab fa-wordpress-simple"></i>Portfolio
<ul class="portfolio">
<li>Work no 1
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 2
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 3
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 4
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 5
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fas fa-sign-in-alt"></i>Login</li>
</ul>
</div>
</body>
</html>【问题讨论】：
-
您还需要将显示从无切换到阻止，否则它是看不见的，但仍会拉伸父级，留下一个对悬停作出反应的空白区域。
标签： html css menu hover dropdown