CSS - 元素具有背景颜色，但也是透明的

Question

我有一个菜单结构，如下所示：

<nav id="main">
    <ul id="nav-user">
        <li class="user-name">
            <span class="name">John Doe</span>
            <ul class="submenu">
                <li>Profile</li>
                <li>Settings</li>
                <li>Sign Out</li>
            </ul>
        </li>
    </ul>
    <ul id="nav-main">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>           
</nav>

我遇到了ul.submenu的问题。它覆盖ul#nav-main，但出于某种原因，它是透明的：

http://jsfiddle.net/JvALU/

我不想看到ul#nav-main。我怎么能改变它？

Answer 1

z-index只能与位于relative，absolute或fixed的元素一起使用。尝试将position: relative;添加到ul.submenu。

希望这有帮助。