CSS drop-down menu: z-index issue

Question

I've got two problems with my CSS drop-down menu: JSFiddle

1) Transitions: Would like the menu to slide-down when the mouse switches to it to open it. The previously opened menu should slide-up to close.

#nav ul li ul
{
    -webkit-transition:height .5s ease-in;
    -moz-transition:height .5s ease-in;
    -o-transition:height .5s ease-in;
    -ms-transition:height .5s ease-in;
    transition:height .5s ease-in;
}

This doesn't seem to work; possibly under the wrong "ul li" selector, though I tried others.

2) Bring the parent item ("Menu1", "Menu2") on top of the menu item list so that it covers the top border of the first child. That is, there should be no border between "Menu1" and "Item1" since "Menu1" doesn't have a bottom border, but looks like it does since "Item1" is on top of it.

Tried playing with z-index, but can't get it working. Neither the transitions.

I realize the menu is a bit convoluted and probably has more CSS than necessary.

possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Stickers, Jul 01 '15 at 22:36
Got it on the display property, thanks. Will have to figure out a way to do a menu without 'display', with visibility. — Mike Priven, Jul 01 '15 at 23:40

sergdenisov · Accepted Answer · 2015-07-05T11:09:35.107

What about it? JSFiddle

#nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav ul li {
    display: inline-block;
    border: 1px solid #FFF;
    border-bottom: 0;
    border-radius: 5px;
    margin: 0 15px;
    position: relative;
    -webkit-transition: border-color 0.2s ease-in;
    -moz-transition: border-color 0.2s ease-in;
    -o-transition: border-color 0.2s ease-in;
    -ms-transition: border-color 0.2s ease-in;
    transition: border-color 0.2s ease-in;
}

#nav ul li a {
    color: #8799B3;
    display: block;
    padding: 10px 6px;
    border: 0;
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
    -o-transition: color 0.2s ease-in;
    -ms-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
}

#nav ul li:hover {
    color: #415161;
    border-color: #E9E9E9;
}

#nav ul li a:hover {
    color: #415161;
}

#nav ul li ul {
    opacity: 0;
    visibility: hidden;
    text-decoration: none;
    line-height: 1;
    color: #8799B3;
    background: #FFF;
    position: absolute;
    top: calc(100% - 5px);
    left: -1px;
    z-index: 1000;
    width: 165px;
    border: 0;
}

#nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
}

#nav ul li ul li {
    border: 0;
    display: block;
    font-size: 14px;
    margin: 0;
    -webkit-transition: background 0.2s ease-in;
    -moz-transition: background 0.2s ease-in;
    -o-transition: background 0.2s ease-in;
    -ms-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in;
}

#nav ul li ul li:hover {
    border: none;
    color: #415161;
    background: #F7F9FB;
}

#nav ul li ul li a {
    padding: 10px;
    border: none;
    color: #8799B3;
    border-left: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
}

#nav ul li ul li:first-child a {
    border-top: 1px solid #E9E9E9;
    border-radius: 0 5px 0 0;
}

#nav ul li ul li:last-child a {
    border-bottom: 1px solid #E9E9E9;
    border-radius: 0 0 5px 5px;
}

#nav ul li ul {
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
}

<div id="nav">
    <ul>
        <li>
            <a href="#">Menu1</a>
            <ul>
                <li><a href="menu.html">Item1</a></li>
                <li><a href="menu.html">Item2</a></li>
                <li><a href="menu.html">Item3</a></li>
                <li><a href="menu.html">Item4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Menu2</a>
            <ul>
                <li><a href="menu.html">Item1</a></li>
                <li><a href="menu.html">Item2</a></li>
                <li><a href="menu.html">Item3</a></li>
                <li><a href="menu.html">Item4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Menu3</a>
            <ul>
                <li><a href="menu.html">Item1</a></li>
                <li><a href="menu.html">Item2</a></li>
                <li><a href="menu.html">Item3</a></li>
                <li><a href="menu.html">Item4</a></li>
            </ul>
        </li>
    </ul>
</div>

This is great, thanks. But since the menus are always displayed, with 0 opacity when not hovered, moving the mouse anywhere under the top menu automatically shows the submenu, even if the mouse is not hovering over the parent menu. Same when moving the mouse sideways from one menu under the adjacent. I tweaked this a little: added `visibility: hidden;` to `#nav ul li ul` and `visibility: visible;` to `#nav ul li:hover ul`. This got rid of the automatic menu showing. With a few more cosmetic tweaks, this should do it, thanks. — Mike Priven, Jul 05 '15 at 03:07
Accepted. Can't seem to upvote, though - apparently I'm too new and not enough reputation points. — Mike Priven, Jul 05 '15 at 14:51

CSS drop-down menu: z-index issue

1 Answers1