hover菜单在固定div的右侧

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

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

    
  
 
setting 1
 
setting 2
 
setting n
 
 
  

任何使用jQuery的想法非常赞赏，随意重新排列任何HTML。

Answer 1

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

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

见DEMO 。

Answer 2

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

1. 你希望你的#panel首先包含一个

   ，它将包含

s，它们将是你的 ，那些应该被设置为inline-block 。

3. #settings应该是其中之一，可能有一个特殊的class或id （我们现在将保留设置）。 你可以position: absolute这个到right: 0 ，或者让它float 。 不要使用图像元素，而是使用background-image 。

4. 在这个元素中，你将有一个子菜单：即另一个

   ， display: none ，一个position:absolute ， right: 0和top: X ，这样X与你的#panel不重叠。

5. 接下来，您希望在li#settings :hover上显示元素。

这是一个有效的演示

基本的HTML

 
 
 
Panel entry 1
 
Panel entry 2
 
Panel entry n
 
 
 
setting 1
 
setting 2
 
setting n
 
 
 
  

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