Question

I am trying to create a flyout menu with CSS and HTML. Essentially I would like to display a single button that reveals a list below it when hovered. The flyout list should be aligned with the right of the button. e.g.

           ////////////
           // BUTTON //
           ////////////
///////////////////////
//  FLYOUT OPTION    //
///////////////////////

I have followed a few examples and produced the following jsFiddle – http://jsfiddle.net/JT5gs/

However, I cannot figure out a way to position the flyout menu apart form using the margin values of the .filtersnav ul rule. E.g.

.filtersnav ul {
    margin:0px 0px 0px -165px;

This works when I know the width of the main button that reveals the flyout, but I need to add localisation to my site so the button could be any length as the text inside it could change.

To clarify my question, is it possible to position the flyout menu to the right of the button when the button has an undetermined width? The JsFiddle shows one flyout menu where the menu is aligned correctly to the right, but the second flyout (with a button containing a longer text value) does not align up correctly.

Answer 1

Put position: relative on your li tag, and set right: 0 instead of margins on your ul tag :

.filtersnav {
  background:#eeeeee;
  font-size:12px;
  font-family:verdana,sans-serif;
  font-weight:bold;
  z-index:1000;
  padding:0;
}
.filtersnav, .filtersnav ul {
  float:right;
  list-style:none;
  margin:0px;
  border: 1px solid #CCCCCC;
  min-width: 75px;
  padding:0;
  background-color: #EEEEEE;
  font-weight:bold;
  z-index:1000;
}
.filtersnav span {
  display:block;
  color:#000000;
  text-decoration:none;
  padding:3px 10px;
  cursor:pointer;
}
.filtersnav li {
  position: relative;
  float:left;
  padding:0;
  background:#eeeeee url('../images/Down.png') no-repeat 97% center;
}
.filtersnav ul {
  position:absolute;
  left:-999em;
  height:auto;
  width:280px;
  font-weight:normal;
  right: 0;
  line-height:1;
  border:0;
  border-top:1px solid #CCCCCC;
  padding:0;
}
.filtersnav li li {
  width:280px;
  border-bottom:1px solid #CCCCCC;
  border-left:1px solid #CCCCCC;
  border-right:1px solid #CCCCCC;
  font-weight:bold;
  font-family:verdana,sans-serif;
  background:#eeeeee;
}
.filtersnav li li span {
  padding:10px 10px;
  width:260px;
  font-size:12px;
  color:#000000;
}
.filtersnav li ul ul {
  margin:-33px 0 0 -281px;
  padding:0px;
  max-height:262px;
  overflow-x: hidden;
  overflow-y: auto;
}

.filtersnav li li:hover{
  background:#145197;
}
.filtersnav li ul li:hover span, .filtersnav li ul li li:hover span, .filtersnav li ul li li li:hover span, .filtersnav li ul li li li:hover span {
  color:#ffffff;
}
.filtersnav li:hover span, .filtersnav li.sfhover span {
  color:#ffffff;
}
.filtersnav li:hover li span, .filtersnav li li:hover li span, .filtersnav li li li:hover li span, .filtersnav li li li li:hover li span {
  color:#000000;
}
.filtersnav li:hover ul ul, .filtersnav li:hover ul ul ul, .filtersnav li:hover ul ul ul ul, .filtersnav li.sfhover ul ul, .filtersnav li.sfhover ul ul ul, .filtersnav li.sfhover ul ul ul ul {
  left:-999em;
}
.filtersnav li:hover ul, .filtersnav li li:hover ul, .filtersnav li li li:hover ul, .filtersnav li li li li:hover ul, .filtersnav li.sfhover ul, .filtersnav li li.sfhover ul, .filtersnav li li li.sfhover ul, .filtersnav li li li li.sfhover ul {
  left:auto;
  background:#eeeeee;
}
.filtersnav li:hover, .filtersnav li.sfhover {
  background:#145197 url('../images/DownSel.png') no-repeat 97% center;
}
.filtersnav li li:hover img {
  filter:Invert;
}    
.filtersnavSelected {
  background-color:#FCBF44
}

<ul class="filtersnav">
  <li>
    <span>Another Flyout Menu &nbsp; &nbsp;</span>
    <ul>
      <li>
        <span>Option</span>
        <ul>
          <li><span>Sub Option</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul> 

<ul class="filtersnav" style="margin-right:25px;">
  <li>
    <span>Flyout Menu &nbsp; &nbsp;</span>
    <ul>
      <li>
        <span>Option</span>
        <ul>
          <li><span>Sub Option</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>