javascript - 无坐标的多个元素的绝对定位

Question

我正在尝试创建简单的 java 脚本菜单。

我有两个绝对定位到相对定位的 div 元素的内部 ul 元素。无论是什么情况，我都无法让 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/