CSS或者JS实现鼠标悬停显示另一元素

想达到鼠标悬停到元素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;
}