想達到鼠標懸停到元素a上，顯示另一個元素b，可以通過css實現也可以通過js實現。
js:
寫兩個函數：mouseenter，mouseleave，例如：其中
$("#a").mouseenter(function() {
$("#b").show("normal");
});
$("#a").mouseleave(function() {
$("#b").hide("normal");
});
css：a元素和b元素需要滿足一定的關系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。
在a元素上寫hover，后面是b元素
<div id="a" class="a">
<a class="content"><span id="txt">蘋果</span></a>
<a class="role_down"></a>
<ul class="b">
<li class="role">栗子</li>
</ul>
</div>
css，display： block；
.a:hover .b {
display:block;
background: #2B7193;
cursor: pointer;
}
另外，如果元素b寬度需要滿屏，而其中的元素又有距離左邊距離等，則b 樣式如下：需要設置width: 100%, position:absolute.
通過b下面的div來為其中的元素定位，該div也就是例子中的c，設置居中：
.c {
width: 1280px;
margin: auto;
}。
元素a樣式：.b {
height: 40px;
width: 100%;
background-color: #2a7193;
position: absolute;
z-index: 10006;
display: none;
margin-top: -5px;
left: 0;
}
這樣c中的元素可以相對c來定位，無論電腦屏幕有多寬，都不會變形。
html代碼：
<div class="a" id="a">
<div class="btn"></div>
<div id="b" class="b">
<div class="c">
<div class="rcontent" id="content">
<a class="dropdown_content">
<span>花生</span>
</a>
</div>
</div>
</div>
</div>
對應的css：
#a:hover .b{
display: block;
}