我有一个带有一个下拉项的菜单。但是，我无法使其工作，因此它在关联的 div 项目下打开。
这是我的代码：
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
float: right;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.top-menu a{
color: black;
float: right;
right:0;
text-align: center;
padding: 24px 26px;
text-decoration: none;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-12 {width: 100%; align-items:normal;}
.dropdown:hover .dropdown-content {
display: block;
}<!DOCTYPE html>
<html>
<body>
<div class="col-12">
<header>
<div class="top-menu" id="myTopnav">
<div><a href="#">Item 3</a></div>
<div><a href="#" target="_blank">Item 2</a></div>
<div class="dropdown">
<a>Item 1 (dropdown)</a>
<div class="dropdown-content">
<div><a>1</a></div>
<div><a>2</a></div>
<div><a>3</a></div>
<div><a>4</a></div>
<div><a>5</a></div>
</div>
</div>
</div>
</header>
</div>
</body>
</html>理想情况下，无论该项目位于何处，
dropdown-contentItem 1 (dropdown)Item 1.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
float: right;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
}