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

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

   which will contain
   • s, which will be your , those should be set as inline-block.

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

   • Inside this element, you will have a submenu: i.e. another

     with display: none, a position:absolute, right: 0 and top: X, so that X doesn't overlap with your #panel.

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

Here's a working demo

Basic HTML

  

      
Panel entry 1
      
Panel entry 2
      
Panel entry n
      


        

          
setting 1
          
setting 2
          
setting n
        

      
  

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;

}