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

需要改变。

你的HTML应该是这样的，

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

和CSS，

.yourclass{
    position: relative;
}
#gallerie_drop{
   position: absolute;
   top: 10px;
   left: 10px;
}

脚本显示/隐藏元素是正确的。

Answer 2

如果您正在创建菜单，请使用UL，LI。这是演示，有可收回的项目。所有没有JS： http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

Answer 3

将position:relative添加到.gallery_drop

#gallerie_drop {
  display:none;
  position:relative;  
}

并将鼠标悬停回调更改为

$("#galerie").mouseover
(
  function()
  {
    $(this).append($('#gallery_drop'));
    $("#gallerie_drop").css("display","block");
  }
);

这会将div附加到您的悬停链接。你的大小合适。

Answer 4

Use Like This
Javascript is not needed   



<!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {

        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {

        background-color: red;
    }

    li.dropdown {
    float:right;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

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

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

    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
    </head>
    <body>

    <ul>

      <li class="dropdown">
        <a href="#" class="dropbtn">Galerie </a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      <li><a class="active" href="#Videos">Videos</a></li>

        <li>  <a href="#photos" >Photos</a></li>
         <li> <a href="#Foo" > Foo</a></li>
         <li> <a href="#Bar" > Bar   </a></li>

      </li>
    </ul>



    </body>
    </html>

在链接下显示下拉菜单

4 个答案: