Javascript 固定div右侧的悬停菜单 我有一个固定位置的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，只需给
#面板
一个宽度：

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

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

您希望您的
#面板
首先包含一个
，其中将包含
s，这将是您的
，这些应设置为
内联块

#设置
应该是其中之一，可能有一个特殊的
类
或
id
（我们暂时保留设置）。您可以将此
定位：绝对
定位到
右侧：0
，或使其
浮动
。不要使用图像元素，而是使用背景图像

在该元素中，您将有一个子菜单：即另一个子菜单，该子菜单带有
显示：无
、位置：绝对
、右侧：0
和
顶部：X
，以便X不会与
面板重叠

接下来，要使元素在
设置的
中可见：悬停


基本HTML
看看jQuery菜单插件
<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>

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

}