如何为注销和更新配置文件功能创建悬停下拉面板？

Question

我想创建一个类似雅虎的注销功能，每当我将鼠标悬停在用户名上时，它应该显示一个包含注销和更新配置文件功能的面板。目前我正在使用此代码，但它没有按预期工作。

<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;
}

Answer 1

您想要的功能是悬停时下拉。这可以通过一点点 jquery 来实现。按照 link 和代码来解决您的问题。

http://jsfiddle.net/uzbssguj/2/

    $('ul li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(200);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(200);
});

这也可以通过CSS

实现

ul li.dropdown:hover .dropdown-menu
{
  display:block;
}

-谢谢

Answer 2

看看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;
}

如何为注销和更新配置文件功能创建悬停下拉面板？

how to create a hover dropdown panel for logout and update profile function?

html

css

jquery

hover