マウスオーバーでリストを表示するにはどうすればいいですか？

Question

<nav> 
<a href="login.html" class="dropdown-content" style="text-align: center"><span id="login">您好</span><i class="login"></i></a> 
<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> 
</nav> 

マウスオーバー（ホバー）時にログイン時にリストを作成できますか？

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

Answer 1

まずのみの回答を希望されていないコードを教えてくださいdiv要素（取扱いが容易）を使用して、あなたのリストをラップまたは1つの要素

<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>