我有以下代码（我知道W3学校正在制作模型）：
HTML：
body {
padding: 0px;
margin: 0;
}
#logo {
font-family: 'Pacifico', cursive;
}
.right {
float: right;
right: 0;
padding-right: 16.5px;
padding-top: 7.5px;
}
.right .si {
border: 0;
background-color: inherit;
font-size: 16px;
margin-right: 10px;
}
.right .su {
border: 0;
background-color: #00b22d;
padding-left: 15px;
padding-right: 15px;
padding-top: 12.5px;
padding-bottom: 12.5px;
font-size: 16px;
border-radius: 10px;
}
/* Navbar container */
.navbar {
overflow: hidden;
background-color: white;
font-family: Verdana;
border-bottom: 1px solid #F0F0F0;
padding: 10px;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 0.5s;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: #808080;
padding: 14px 16px;
background-color: inherit;
transition-duration: 0.5s;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
padding-top: 18px;
margin: 0;
}
.navbar .dropdown:hover .dropbtn {
color: black;
transition-duration: 0.5s;
}
.navbar a:hover {
color: #808080;
transition-duration: 0.5s;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
margin-top: 17.5px;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 15%;
padding: 10px;
background-color: white;
height: 100%;
}
.column p {
float: none;
color: #808080;
padding-left: 26px;
padding-top: 0px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
font-family: Verdana;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
margin: 0;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
font-family: Verdana;
}
.column h4 {
font-family: Verdana;
padding-left: 26px;
padding-top: 0px;
padding-bottom: 0px;
}
.column img {
height: 150px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}<head>
<link rel="stylesheet" href="main.css">
</head>
<div class="navbar">
<a href="#" id="logo">Middle.ly</a>
<div class="dropdown">
<button class="dropbtn">Explore
<i class="fa fa-caret-down"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none" role="img" class="icon caret" style="padding-bottom: 2px;">
<path d="M1 1L5.07223 5.1517L9.23083 1" stroke="black"></path>
</svg>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Find Work
<i class="fa fa-caret-down"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none" role="img" class="icon caret" style="padding-bottom: 2px;">
<path d="M1 1L5.07223 5.1517L9.23083 1" stroke="black"></path>
</svg>
</button>
|
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Hiring Designers?
<i class="fa fa-caret-down"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none" role="img" class="icon caret" style="padding-bottom: 2px;">
<path d="M1 1L5.07223 5.1517L9.23083 1" stroke="black"></path>
</svg>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
<div class="column">
<a href="#">
<img src="https://static.thenounproject.com/png/1020693-200.png">
<h4>Page name</h4>
<p>Page description</p>
</a>
</div>
</div>
</div>
</div>
<div class="right">
<button class="si">Sign in</button>
<button class="su">Sign up</button>
</div>
</div>jsfiddle在这里https://jsfiddle.net/ProxyCode/56vsja70/1/
除了在按钮所在的位置和下拉菜单开始的位置之间存在很小的距离这一事实之外，所有代码都非常有效，这意味着该下拉菜单在用户将鼠标悬停并停留在原处之前就消失了。谢谢。
在您的CSS文件中，将类“ .dropdown-content”更改为使用：
margin-top: 0;
而不是17.5像素。
这样，您就可以在dropdown-content和dropbtn之间添加空间。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句