下拉菜单仅在每个按钮悬停时打开一个下拉框

Question

我正在使用div标签设置一个下拉菜单，但是当我有两个下拉框时，当我将鼠标悬停在每个框上时就会出现。

我尝试使用ul li标记，但这无济于事。

.dropbtn {
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #EFEFEF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 50px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block !important;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="topnav">
  <div class="dropdown">
    <a class="dropbtn">چرا ما ؟</a>
    <div class="dropdown-content">
      <a href="#">لینک 1</a>
      <a href="#">لینک 2</a>
      <a href="#">لینک 3</a>
    </div>
    <div class="dropdown">
      <a class="dropbtn">تماس</a>
      <div class="dropdown-content">
        <a href="#">لینک 1</a>
        <a href="#">لینک 2</a>
        <a href="#">لینک 3</a>
      </div>
    </div>
  </div>

我希望当我将鼠标悬停在每一个上时，会出现子下拉菜单内容，但只有一个出现。

Answer 1

您的标记不正确。另外，您的容器下拉列表必须具有相对位置。

尝试一下；

 .dropbtn {
        color: black;
        padding: 16px;
        font-size: 16px;
        border: none;
      }

      .dropdown {
	      position: relative;
	      display: inline-block;

      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #EFEFEF;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        margin-top: 50px;
      }

      .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block !important;
      }

      .dropdown-content a:hover {background-color: #ddd;}

      .dropdown:hover .dropdown-content {display: block;}

<div class="topnav">
	<div class="dropdown">
			<a class="dropbtn">چرا ما ؟</a>
				<div class="dropdown-content">
	                 <a href="#">لینک 1</a>
	                                    <a href="#">لینک 2</a>
	                                    <a href="#">لینک 3</a>
                </div>
     </div>
     <div class="dropdown">
        <a class="dropbtn">تماس</a>
        <div class="dropdown-content">
                                    <a href="#">لینک 1</a>
                                    <a href="#">لینک 2</a>
                                    <a href="#">لینک 3</a>
        </div>
     </div>

</div>