为什么造型不同

Question

具体来说，第一个示例有两列，第二个示例只有一列。

正常工作示例（fiddle）：

#menu {
    border: 1px solid black;
    box-shadow: 2px 2px 2px #888888;
    position:absolute;
    background:yellow;
}
#menu ul {
    list-style-type: none;
    padding: 0;
    margin-top:0
}
#menu ul.right {
    position:relative;
    float:right;
}
#menu ul.left {
    position:relative;
    float:left;
}
li:hover {
    background:gray;
}

<div id='menu'>
    <ul class="left">
        <li>one</li>
        <li>two</li>
    </ul>
    <ul class="right">
        <li>one</li>
        <hr />
        <li>two</li>
    </ul>
</div>

无法正常工作（fiddle）：

#rightClickMenu {
    position:absolute;
    border: 1px solid black;
    box-shadow: 2px 2px 2px #888888;
    background: white;
}
#rightClickMenu ul {
    list-style-type: none;
    padding: 0;
    margin-top:0;
}
#righClickMenu ul.left {
    position:relative;
    float:left;
}
#righClickMenu ul.right {
    position:relative;
    float:right;
}
.resource:hover {
    background:gray;
}

<div id='rightClickMenu'>
    <ul class='left'>
        <li class='save'>Save</li>
        <hr />
        <li class='load'>Load Base</li>
        <li class='load'>Load EP 1</li>
        <li class='load'>Load EP 2</li>
        <li class='load'>Load EP 3</li>
        <li class='load'>Load EP 4</li>
        <li class='load'>Load EP 5</li>
        <li class='load'>Load Blank</li>
        <li class='load'>Load From File</li>
        <hr />
        <li class='create'>Create with Sf's</li>
        <li class='create'>Create with EP</li>
        <li class='create'>Create with Infinity</li>
    </ul>
    <ul class='right'>
        <li class='height'>
            <input type="checkbox" id='six' class='heightChange'/>Height 6</li>
        <li class='height'>
            <input type="checkbox" id='seven' class='heightChange'/>Height 7</li>
        <li class='height'>
            <input type="checkbox" id='eight' class='heightChange'/>Height 8</li>
        <li class='height'>
            <input type="checkbox" id='nine' class='heightChange'/>Height 9</li>
        <hr />
        <li class='resource'><span id='wood'>3</span> Wood</li>
        <li class='resource'><span id='ore'>4</span> Ore</li>
        <li class='resource'><span id='wheat'>3</span> Wheat</li>
        <li class='resource'><span id='brick'>4</span> Brick</li>
        <li class='resource'><span id='sheep'>4</span> Sheep</li>
        <li class='resource'><span id='desert'>1</span> Desert</li>
        <li class='resource'>Remove Tile</li>
    </ul>
</div>

Answer 1

更改#righClickMenu ---＆gt; #rightClickMenu ...在你的.left和.right选择器上：D