html - 当用户鼠标悬停在用户名上时如何设计页眉样式显示注销

Question

我在 MVC4 中工作。我对设计端不太熟悉。在我的应用程序中，我的标题如下：

但是在鼠标悬停在用户名上时，我想要这个：

我如何实现这种风格。

HTML：

<div class="header">
    <div class="title">
        <span style="font-size: 24pt; font-weight: bold; color: White">Company name</span>
        <div id="login" class="loginDisplay">
            Username
        </div>
    </div>
</div>

CSS：

.header {
  background: url("images/header-bg.jpg") repeat scroll 0 0 #3B5998;
  height: 100px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.title {
  height: 45%;
  padding: 8px;
  position: relative;
  width: 98%;
}
.loginDisplay {
  color: #FFFFFF;
  font-size: 1.1em;
  position: absolute;
  right: 15px;
  text-align: right;
  top: 15px;
} 

Answer 1

演示：http: //jsfiddle.net/Rvvaa/

添加了 CSS

#login:hover {
    background-color: yellow; /* illustrative colour */
    height: 300px;
}

Answer 2

编辑：http: //jsfiddle.net/mmdYY/

.loginDisplay {
  color: #FFFFFF;
  font-size: 1.1em;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
    width:200px;
    padding-right:15px;
    padding-top:15px;
} 

.loginDisplay:hover {
    display:block;
    background:#192776;
    width:200px;
    height:200px;
    cursor: pointer;
}