固定 div 右侧的悬停菜单 [英] hover-menu in right side of fixed div

问题描述

我有一个固定位置(顶部面板)的 div，它的最右侧还应包含一个设置菜单(当前通过浮动).

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

<面板输入1><面板输入2><面板输入n><div id="settings" style="float:right/snapped to right side><ul><li>设置1</li><li>设置2</li><li>设置 n</li>

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

解决方案

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

#panel {位置:固定；宽度:100%；}#设置{浮动:对；}

参见演示.

I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating).

When hovering over the settings-image, I want to display a menu below the image. I want the menu to be aligned to the right side just like the image.

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

Any idea using jQuery very much appreciated, feel free to rearrange any html.

解决方案

No jQuery necessary, just give your #panel a width:

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

See DEMO.

这篇关于固定 div 右侧的悬停菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！