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

【问题标题】：how to create a hover dropdown panel for logout and update profile function?如何为注销和更新配置文件功能创建悬停下拉面板？
【发布时间】：2015-12-03 21:02:30
【问题描述】：

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

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

【问题讨论】：

你用过引导吗？
你能做一个演示吗？
我使用了它，但它显示了我不想要的按钮。当我将鼠标悬停在它上面时，我只想要一个登录用户名和面板显示。
How to make twitter bootstrap menu dropdown on hover rather than click的可能重复
Goldemowner-我如何显示代码也有 php 和数据库连接。

标签： jquery html css hover

【解决方案1】：

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

【讨论】：

嘿，如果我想通过 CSS 调整用户名，它会移动整个标题。所以只是想知道你是否可以将 id 添加到每个列表或主列表中，以便我可以定位到整个用户名
不工作。当我尝试移动用户名时，即使其他列表注销也会移动很远
你能展示一下它的外观吗？或者用看起来如何做一个笨拙的人，所以我可以提供帮助，因为我真的不明白。
我知道这很难理解。在这里找到它。 jsfiddle.net/stark143/wLh9wqs0我只想把整个用户名移到右边，这样就可以了
@Stark 终于明白了！很简单，但我明白了，take a look。我唯一添加的是text-align: right; 到#nav-ul

【解决方案2】：

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

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

-谢谢

【讨论】：

谢谢，效果很好。但是插入符号和用户名放错了位置。如何将它放在用户名旁边，并去掉用户名之前的粗点，因为 ul 标签。
看看更新的小提琴希望它有所帮助。不要忘记接受并投票给答案；）链接：jsfiddle.net/uzbssguj/3
你能告诉我如何在 CSS 中定位用户名吗，因为我想在我已经存在的标题中调整它，我无法定位用户名。