javascript - 在链接下显示下拉菜单

Question

我尝试在用户将鼠标悬停在 ID 为 galerie 的链接上后显示下拉菜单。我是这样解决的:

$("#gallerie").mouseover
(
  function()
  {
  	$("#gallerie_drop").css("display","block");
  }
);

$("#gallerie_drop").mouseleave
(
  function()
  {
  	$("#gallerie_drop").css("display","none");
  }
);

#header {
  text-align: right;
  padding:20px;
}

#header a {
  padding: 20px;
}

#gallerie_drop {
  display:none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: block;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
      <a href="#" id="gallerie">	Galerie  </a>
      <a href="#" id="videos">	Videos   </a>
      <a href="#" id="photos">	Photos   </a>
      <a href="#" id="foo">	Foo   </a>
      <a href="#" id="bar">	Bar   </a>
</div>

<div class="dropdown-content" id="gallerie_drop">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

但是我怎样才能让这个框出现在链接的正下方呢？

JSFIDDLE:https://jsfiddle.net/c544es76/2/

Answer 1

如果您正在创建菜单，请使用 UL、LI。这是演示，带有可悬停的元素。全部没有JS: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar