固定 div 右侧的悬停菜单答案

【问题标题】：hover-menu in right side of fixed div固定 div 右侧的悬停菜单
【发布时间】：2013-03-15 22:47:14
【问题描述】：

我有一个位置固定的 div（顶部面板），它还应在最右侧包含一个设置菜单（目前通过浮动）。

将鼠标悬停在设置图像上时，我想在图像下方显示一个菜单。我希望菜单像图像一样与右侧对齐。

<div id="panel" style="position:fixed">
  <panel-entry 1>
  <panel-entry 2>
  <panel-entry n>

  <div id="settings" style="float:right/snapped to the right side>
    <img src=settings>
    <ul>
      <li>setting 1</li>
      <li>setting 2</li>
      <li>setting n</li>
    </ul>
  </div>
</div>

非常感谢任何使用 jQuery 的想法，请随时重新排列任何 html。

【问题讨论】：

看看jQuery菜单插件jqueryui.com/menu

标签： javascript jquery menu css-position

【解决方案1】：

不需要 jQuery，只需给你的 #panel 一个宽度：

#panel {
  position: fixed;
  width: 100%;
}
#settings {
  float: right;
}

见DEMO。

【讨论】：

【解决方案2】：

除了您的示例不是 HTML，我无论如何都会纠正概念方法。这样的任务不需要 jQuery，可以完全在 CSS 中完成。

你希望你的#panel首先包含一个<ul>，它将包含<li>s，这将是你的<panel-entry>，这些应该设置为inline-block。
#settings 应该是其中之一，可能带有特殊的class 或id（我们暂时保留设置）。你可以position: absolute这个right: 0，或者拥有它float。不要为此使用图像元素，而是使用background-image。
在此元素内，您将有一个子菜单：即另一个 <ul> 和 display: none、position:absolute、right: 0 和 top: X，因此 X 不会与您的 @987654339 重叠@。
接下来，您想让元素在:hover 或li#settings 上可见。

Here's a working demo

基本 HTML

<div id="panel">
  <ul>
      <li>Panel entry 1</li>
      <li>Panel entry 2</li>
      <li>Panel entry n</li>
      <li id="settings">

        <ul>
          <li>setting 1</li>
          <li>setting 2</li>
          <li>setting n</li>
        </ul>

      </li>
  </ul>
</div>

基本 CSS

#panel {
  position: fixed;
  top: 0;
  width: 100%;
}

#panel > ul > li {
  display: inline-block;
}

#panel > ul > li > ul {
  display: none;
  position: absolute;
  top: {X};
  right: 0;
}

li#settings {

  background: url({youricon}) no-repeat top center;
  position: absolute;
  right: 0;
  min-width: {youricon-x};
  min-height: {youricon-y};
}

li#settings:hover > ul{

  display: block;

}

【讨论】：