html - ナビゲーションバーのドロップダウンボックスの書式設定の問題 css

Question

ナビゲーション バーを作成していますが、ドロップ ダウン メニューのオプションが上下に並んでいるのではなく、横に並んでいる理由がわかりません。私は検索して、ほぼすべてを試しました。助言がありますか？

http://jsfiddle.net/isherwood/rUsNr/

HTML マークアップ:

<ul class="jsddm">
    <li><a href="home">Home</a>
    <li><a href="#">OS</a>
        <ul>
            <li><a href="#">Android</a></li>
            <li><a href="#">iOS</a></li>
        </ul>
    </li>
    <li><a href="#">Category</a>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
        </ul>
    </li>
    <li><a href="#">Rating</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </li>
    <li><a href="login">Login</a></li>
    <li><a href="register">Register</a></li>
</ul>

CSS

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 1.5em;

}

ul.jsddm a
    {
    color: #FFF;
    background-color: #333;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
}

ul.jsddm li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

ul.jsddm ul
{
    position: absolute;
    width: 150px;
    top: 25px;
    padding: 0;
    visibility: hidden;
}

コードの ul.jsddm li 部分で幅を 16% に維持したい (これは、小さい画面用に縮小された bav バーでした。