Question

我有一个小问题，我已经做了一个例子来帮助传达出错的地方以及我想要实现的目标。因此，您可以看到有一个标题，一个按钮，一些内容。现在，当您将鼠标悬停在此按钮上时，会显示一个下拉列表，但它并未位于我希望的位置。它位于标题下方并与内容重叠。如果有人能指出我正确的方向，这将是惊人的。

感谢。

$("#ddBtn").hover(function() {
  $("#dropdown").toggle();
});

.ddBtn{
  margin:20px;
  float:right;
}
.pageBtns{
  display:block;
  margin:20px;
}
#header {
  width: 100%;
  height:60px;
  background-color:#333;
}
#page{
  border:2px solid #999;
}
#dropdown{
  float:right;
  background-color:#d6d6d6;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="header">
  <button id="ddBtn"class="ddBtn">Drop Down</button>
</div>
<div id="page">
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
</div>
<div id="dropdown" class="hidden">
  <button class="pageBtns">Page1</button>
  <button class="pageBtns">Page2</button>
  <button class="pageBtns">Page3</button>
  <button class="pageBtns">Page4</button>
  <button class="pageBtns">Page5</button>
</div>

Answer 1

当您使用下拉菜单时，通常会使用相对/绝对定位。

init(snapshot:FIRDataSnapshot) {
    let dictionary = snapshot.value as! [String:Any]
    self.fromId = dictionary["fromId"] as! String
    self.toId = dictionary["toId"] as! String
    //Make one more property with name type of String
    self.type = dictionary["type"] as! String
    self.text = dictionary["text"] as? String ?? ""
    self.imageUrl = dictionary["imageUrl"] as? String ?? ""
}

$("#ddBtn").hover(function() {
  $("#dropdown").toggle();
});

.ddBtn{
  margin:20px;
  float:right;
}
.pageBtns{
  display:block;
  margin:20px;
}
#header {
  position: relative;
  width: 100%;
  height:60px;
  background-color:#333;
}
#page{
  border:2px solid #999;
}
#dropdown{
  position: absolute;
  right:0;
  top:100%;
  background-color:#d6d6d6;
  display: none;
}

Answer 2

当您将鼠标悬停在按钮上时，它会显示菜单。但是当你移除光标时，它会消失。所以你不会这样做。这就是为什么你使用点击事件来显示菜单并再次点击隐藏。

$("#ddBtn").hover(function() {
  $("#dropdown").toggle();
});

//if you want to keep dropdownmenu after appearing then you can use this.

/*$("#ddBtn").click(function() {
  $("#dropdown").toggle();
});*/

.ddBtn{
  margin:20px;
  float:right;
}
.pageBtns{
  display:block;
  margin:20px;
}
#header {
  width: 100%;
  height:60px;
  background-color:#333;
}
#page{
  border:2px solid #999;
}
#dropdown{
  background-color:#d6d6d6;
  display: none;
  position:absolute;
  right:3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="header">
  <button id="ddBtn"class="ddBtn">Drop Down</button>
</div>
<div id="dropdown" class="hidden">
  <button class="pageBtns">Page1</button>
  <button class="pageBtns">Page2</button>
  <button class="pageBtns">Page3</button>
  <button class="pageBtns">Page4</button>
  <button class="pageBtns">Page5</button>
</div>
<div id="page">
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
</div>

这和你想要的一样吗？

希望这有帮助。

Answer 3

从您的问题我得到的是，您希望在悬停时显示页面列表，以便用户可以从这些页面中进行选择。然后，您不仅需要在下拉按钮下显示包含指向页面的链接的div，而且还需要确保它保留在那里供用户进行操作。

我对你的css和jquery进行了一些修改，试一试

＆＃13;

$("#ddBtn").hover(function() {
  $("#dropdown").toggle();
});
$("#dropdown").mouseenter(function() {
   $("#dropdown").show();
});
$("#dropdown").mouseleave(function() {
   $("#dropdown").hide();
});

＆＃13;

.ddBtn{
  margin:20px;
  float:right;
}
.pageBtns{
  display:block;
  margin:20px;
}
#header {
  position: relative;
  width: 100%;
  height:60px;
  background-color:#333;
}
#page{
  border:2px solid #999;
}
#dropdown{
  float:right;
  position:absolute;
  z-index:10;
  top:42px;
  right:20px;
  background-color:#d6d6d6;
  display: none;
   }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="header">
  <button id="ddBtn"class="ddBtn">Drop Down</button>
  
<div id="dropdown" class="hidden">
  <button class="pageBtns">Page1</button>
  <button class="pageBtns">Page2</button>
  <button class="pageBtns">Page3</button>
  <button class="pageBtns">Page4</button>
  <button class="pageBtns">Page5</button>
</div>
</div>
<div id="page">
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
  <p>Received the likewise law graceful his. Nor might set along charm now equal green. Pleased yet equally correct colonel not one. Say anxious carried compact conduct sex general nay certain. Mrs for recommend exquisite household eagerness preserved now. My improved honoured he am ecstatic quitting greatest formerly. 

Ladies others the six desire age. Bred am soon park past read by lain. As excuse eldest no moment. An delight beloved up garrets am cottage private. The far attachment discovered celebrated decisively surrounded for and. Sir new the particular frequently indulgence excellence how. Wishing an if he sixteen visited tedious subject it. Mind mrs yet did quit high even you went. Sex against the two however not nothing prudent colonel greater. Up husband removed parties staying he subject mr. 

Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
</div>

＆＃13;

制作下拉div重叠内容div

3 个答案: