Hover-menu In Right Side Of Fixed Div

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 t

Solution 1:

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

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

See DEMO.

Solution 2:

Aside from your example not being HTML, I would anyhow correct the conceptual approach. There is no jQuery required for such a task, which can be done entirely in CSS.

1. You want your #panel to first of all contain a <ul> which will contain <li>s, which will be your <panel-entry>, those should be set as inline-block.

2. The #settings should be one of those, perhaps with a special class or id (we'll keep settings for now). You can position: absolute this to right: 0, or have it float. Don't use an image element for this, but rather use a background-image.

3. Inside this element, you will have a submenu: i.e. another <ul> with display: none, a position:absolute, right: 0 and top: X, so that X doesn't overlap with your #panel.

4. Next, you want to make the element visible on :hover of li#settings.

Here's a working demo

Basic HTML

<divid="panel"><ul><li>Panel entry 1</li><li>Panel entry 2</li><li>Panel entry n</li><liid="settings"><ul><li>setting 1</li><li>setting 2</li><li>setting n</li></ul></li></ul></div>

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

}