Jquery 如何在鼠标上方显示列表

首先使用div元素（更易于处理）包装列表或逐个显示元素

#login{
    color: #cb3e31;
    font-size: 18px;
    top: 31px;
    margin-top: 30px;
    margin-left: 15px;
    width: auto;
    text-align: center;
}

$（“#登录”）。悬停(
函数（）{
//显示元素
$（“#列表”）.show（）；
}，函数（）{
//隐藏元素
$（“#列表”）.hide（）；
}
);

#login{
    color: #cb3e31;
    font-size: 18px;
    top: 31px;
    margin-top: 30px;
    margin-left: 15px;
    width: auto;
    text-align: center;
}

<nav>
    <a href="login.html" class="dropdown-content" style="text-align: center">
       <span id="login">您好</span><i class="login"></i>
    </a>
    <div id="list">
        <a href="9.html"><i class="like"></i></a>
        <a href="7.html"><i class="file"></i></a>
        <a href="4.html" style="text-align: center"><span id="counter">0</span><i class="drink"></i></a>
    </div>
</nav>

<script>
    $("#login").hover(
      function() {
        // show element
        $('#list').show();
      }, function() {
        // hide element
        $('#list').hide();
      }
    );
</script>