javascript - 座標のない複数要素の絶対配置

Question

シンプルな Java スクリプト メニューを作成しようとしています。

相対的に配置された div 要素に絶対的に配置された 2 つの内部 ul 要素があります。ul inline-blocks を隣り合わせにすることができない場合があります。2 番目のブロックが最初のブロックの上に描画されるようです。また、メニューを画面の右側に表示したいと考えています。

ul 要素の width を 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; 
}