bootstrap+jq+css实现鼠标经过账号自动下拉菜单

css中主要是两个类，一个菜单menuitem、一个是菜单列表     submenu    

.menubar
{line-height: 24px;}

.menubar .menuend
{clear: both;}

.menuitem
{background:gainsboro ; border:none; position: relative; float: left; margin-right: 1em;}

.menuitem .submenu
{background: #EAEAEA; border: 1px solid #EAEAEA; position: absolute; top: 35px; left: -1px; width: 6em;}

.menuitem .submenu
{display: none;}
.menuitem:hover .submenu
{display: block;}

一个div类为 menuitem，其中建一个div块显示用户名，另外一个块显示菜单列表，这里菜单列表中都是a标签。

<div id="setuserbar" class="navbar-brand menuitem" style="padding-left: 5px;float: right;display: none">
                        <div id="username" style="">用户xxx</div>
                        <div class="submenu">
                            <div style="padding-top: 20px;padding-bottom: 20px" align="center"><a id="usermess" href="" style="color: #4cae4c;padding-bottom: 15px">新消息<span style="color: #c12e2a">(11)</span></a></div>
                            <div style="padding-bottom: 20px" align="center"><a style="color: #4cae4c" href="">管理中心</a></div>
                            <div style="padding-bottom: 20px" align="center"><a style="color: #4cae4c" href="">个人空间</a></div>
                            <div  style="padding-bottom: 15px" align="center"><a id="quitUser" style="color: #4cae4c" href="">退出登录</a></div>
                        </div>
                    </div>
                    <div class="navbar-brand" style="padding-top: 5px;padding-right: 3px;float: right;">
                        <img id="userImg" class="img-circle" src="resource/m2.png" style="float: left; width: 40px;height: 40px;display:none;text-align:center;" ></img>
                    </div>

float:right  需要注意的是使用到这个属性时，需要把头像放到后面，用户名才会显示在左边。另外bootstrap中的navbar-brand属性设置的上下左右间距，如果想要好看点可以自己调整包裹img的div标签中的padding值。

 

登录后显示头像和用户名：

$("#setuserbar").show();
$("#username").text(j.name);
$("#userImg").show();

 

这里还有一个问题就是，当鼠标经过头像时，是不会自动下拉的。这个可以自己搞一搞