hover-menu in right side of fixed div

Question

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.

Answer 1

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

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

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;

}

Answer 2

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

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

See DEMO.