絕對定位多個元素而無需坐標

Question

我正在嘗試創建簡單的Java腳本菜單。

我有兩個內部ul元素，它們絕對定位在相對定位的div元素上。 無論如何，我都無法使ul內聯代碼塊彼此相鄰。 似乎第二個塊被繪制在第一個塊的頂部。 我也想使菜單出現在屏幕的右側。

我什至為ul元素提供了100％的寬度。 一切正常，直到我添加位置：絕對； 對ul元素。

http://jsfiddle.net/FhV8c/3/

<div id="izmenu">   
            <ul>
                <li class="menu-heading"><a href="#">home</a></li>
            </ul>
            <ul>
                <li class="menu-heading"><a href="#">login</a></li>
                <li><a href="#">settings</a></li>
                <li><a href="#">logout</a></li>
            </ul>
        </div>

CSS

#izmenu {
 position: relative; 
 float:right;
}

#izmenu ul {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 list-style: none;
 display:inline-block;
 vertical-align:top;
 position:absolute;
 right:0;
}

#izmenu ul li 
{
     padding: 0 0 0 0;
     margin: 0 0 0 0; 
}

 #izmenu a {
    background-color: #006899;
    text-decoration: none;
    padding: 10px 15px 10px 15px;
    display: block;
    text-align: center;
    color: white;
    margin: 0 0 0 0; 
}

Answer 1

如何浮動元素？

#izmenu ul {
  margin: 0 10px 0 0;
  display:block;
  float:left;
}

小提琴

Answer 2

兩個元素都相對於同一div定位。 一種執行所需操作的方法是提供ul的ID，然后按如下所示設置其right位置：

#one {
  right: 0
}

#two {
  right: 60px;
}

參見http://jsfiddle.net/FhV8c/6/