我想要蓝色的下拉栏和上面的黑框对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>裂开的鱼</title>
<style>
* {
margin-top: 0px;
}
.dropdown {
list-style: none;
}
/* 消除标记 */
.top {
background: url(logo/1.png);
background-repeat: no-repeat;
/* 背景图片只显示一次 */
background-size: 225px 50px;
width: 1440px;
height: 50px;
margin: 0 auto;
background-color: black;
}
.logo {
width: 1440px;
height: 50px;
margin: 0 auto;
}
.logo1 {
float: left;
margin-left: 400px;
}
.logo2 {
float: left;
margin-left: 30px;
}
.logo3 {
float: left;
margin-left: 30px;
}
.logo4 {
float: left;
margin-left: 30px;
}
.logo5 {
float: left;
margin-left: 30px;
}
.dropdown {
display: inline-block;
}
/* 使元素独占一个盒子 */
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(38, 146, 196);
width: 1440px;
height: 300px;
/* 设置链接元素的最小宽度 */
box-shadow: 0px 5px 0px 0px rgb(121, 121, 120);
/* 设置下拉框阴影 上下左右顺序*/
overflow: auto;
/* 如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。flex中的属性 */
margin-top: 50px;
margin-left: 0;
}
/* 隐藏菜单 */
.skill-box {
float: left;
width: 360px;
height: 250px;
background-color: rgba(0, 0, 0, 0)
}
.logo1 :hover {
color: #fff;
background: rgba(0, 114, 170, 1);
}
.logo2 :hover {
color: #fff;
background: rgba(234, 85, 41, 1);
}
.logo3 :hover {
color: #fff;
background: rgba(253, 209, 0, 1);
}
.logo4 :hover {
color: #fff;
background: rgba(167, 166, 166, 1);
}
.logo5 :hover {
color: #fff;
background: rgba(217, 217, 217, 1);
}
/* 下拉技能盒子 */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="top">
<ul class="logo">
<div class="dropdown">
<a href="#" class="logo1"><img src="logo/蓝鱼.png" height="50"></a>
<div class="dropdown-content">
<!-- dropdown-content下拉内容 -->
<div class="dropdown-box">
<div class="skill-box">1</div>
<div class="skill-box">2</div>
<div class="skill-box">3</div>
<div class="skill-box">4</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="logo2"><img src="logo/红鱼.png" height="50"></a>
<div class="dropdown-content">
<!-- dropdown-content下拉内容 -->
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="logo3"><img src="logo/黄鱼.png" height="50"></a>
<div class="dropdown-content">
<!-- dropdown-content下拉内容 -->
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="logo4"><img src="logo/黑鱼.png" height="50"></a>
<div class="dropdown-content">
<!-- dropdown-content下拉内容 -->
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="logo5"><img src="logo/白鱼.png" height="50"></a>
<div class="dropdown-content">
<!-- dropdown-content下拉内容 -->
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
</ul>
</div>
</body>
</html>
