我想创建一个类似雅虎的注销功能，每当我将鼠标悬停在用户名上时，它应该显示一个包含注销和更新配置文件功能的面板。目前我正在使用此代码，但它没有按预期工作。
<ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><h1 id="hello"><em><?php echo $login_user;?></em></h1>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="icon-arrow-up"></i><a href="#">Logout</a></li>
<li><i class="icon-arrow-down"></i><a href="#">Update Profile</a>
</li>
</ul>
</li>
</ul>
CSS
.dropdown-menu a {
white-space: normal;
left: 1000px;
padding-bottom: 100px;
}
.dropdown-menu > li {
position: relative;
}
.dropdown-menu > li > i {
position: absolute;
left: 0;
top: 3px;
}
最佳答案
看看this ，它是纯 HTML 和 Css。
HTML代码:
<body>
<ul>
<li><a href="#">Update</a></li>
<li>
<a>Username</a>
<ul class="dropdown">
<li><a href="#">Log out</a></li>
</ul>
</li>
</ul>
</body>
CSS 代码:
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: right;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
关于jquery - 如何为注销和更新配置文件功能创建悬停下拉面板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34066504/