Question

I’m creating a CSS multidimensional menu. I’m using transitions to fade it in/out to avoid the moving the mouse 1 pixel away minimizing the menu issue. It works, however when you move the mouse away, if there’s more than 1 item in the submenu all but the first item is invisible for the ease out transition.

Relevant code:

ul.menu li>ul {
....
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s, overflow 0s linear 0.5s, opacity 0.5s linear 0s;
}
ul.menu li:hover>ul {
    overflow:visible;
    visibility:visible;
    opacity:1;
    transition:visibility 0s linear 0s, overflow 0s linear 0.5s, opacity 0.5s linear 0s;
}

Jsfiddle: http://jsfiddle.net/fGWzg/
How to reproduce issue: Move your mouse over the first “hi” in the main bar, then move it off it. Only the first item will remain.

Answer 1

I believe you are talking about Firefox, as webkit browsers do not show any transition, you may want to view your website in Chrome or Internet Explorer. You should always be developing in Chrome, it is simply superior to Firebug now.

As for your problem:

ul.menu li > ul {
    height: 100%; /* delete */
    left: 0;
    margin: 0;
    opacity: 0;
    ...
}

---

After much work:

/* reset */
body {
    margin:0;
}
ol, ul {
    margin: 0;
    padding: 0;
}

/* global */
ul.menu,
ul.menu ul {
    list-style-type: none;
}
ul.menu,
ul.menu a {
    color: white;
}
ul.menu a {
    display: block;
    text-decoration: none;
}
ul.menu li {
    position: relative;
    height: 35px;
    line-height: 35px;
    font-weight: bold;
    text-align: center;
}
ul.menu li:hover {
    background-color: #11689E;
}

/* menu (just the first one) */
ul.menu {
    padding-left: 35px;
    background: #1BBFE0;
}
ul.menu > li {
    margin-right: 8px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 5%;
    background-color: #1B94E0;
}

/* sub-menus (fading menus) */
ul.menu ul {
    position: absolute;
    width: 100%;
    background-color: #1B94E0;
    visibility: hidden;
    opacity: 0;
}
ul.menu li:hover > ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s linear;
       -moz-transition: opacity .5s linear;
         -o-transition: opacity .5s linear;
            transition: opacity .5s linear;
}

/* "pop out" sub-menus */
ul.menu li > ul ul {
    top: 0;
    right: -100%;
}

http://jsfiddle.net/654Ta/2/

Works in all browsers except IE7 and below (due to the > selector not supported). If you replace those, it will work in IE6.

Cheers