CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 18859

CSS - element has background color, but is also transparent

I have a menu structure, like this:

<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>

I'm having an issue with ul.submenu. It's overlaying ul#nav-main, but for some reason it's transparent:

http://jsfiddle.net/JvALU/

I don't want to see the ul#nav-main. How can I change that?

Upvotes: 0

Views: 78

Answers (1)

David Link
David Link

Reputation: 546

z-index can only be used with elements that are positioned relative, absolute, or fixed. Try adding position: relative; to ul.submenu.

Hope this helps.

Upvotes: 4

Related Questions