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

Question

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

我有两个内部 ul 元素绝对定位到一个相对定位的 div 元素。无论是什么情况，我都无法让 ul 内联 block 彼此相邻。似乎第二个 block 被绘制在第一个 block 的顶部。我还想让菜单出现在屏幕的右侧。

我什至给 ul 元素设置了 100% 的宽度。一切正常，直到我添加 position:absolute;到 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

float 元素怎么样？

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

Fiddle