CSS3 Opacity Fade In With Relative Blocking Elements

When designing menus it’s easy to use the boring old display:block and display:none code to hide and show sub-level elements. The downside to that is you can’t use CSS3 effects on them, but if don’t use them you can get caught up showing the element when you don’t want to due to it’s position. z-index is the answer…

Example:

Code:

<div class="container">
    <div class="left">
        <ul>
            <li><a href="#">Menu Item 1</a>
                <ul>
                    <li><a href="#">Menu-Sub1</a></li>
                    <li><a href="#">Menu-Sub2</a></li>
                    <li><a href="#">Menu-Sub3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    <span>Broken</span>    
    </div>
    <div class="right">
        <h3>Hover around here and you'll see the problem.</h3>Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla.
    </div>
</div>
 
<div class="container">
    <div class="left">
        <ul>
            <li><a href="#">Menu Item 1</a>
                <!-- Here's the fix, check the CSS for the class to get the explanation -->
                <ul class="fixed">
                    <li><a href="#">Menu-Sub1</a></li>
                    <li><a href="#">Menu-Sub2</a></li>
                    <li><a href="#">Menu-Sub3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    <span>Fixed</span>    
    </div>
    <div class="right">
        <h3>Hover around here and you'll see it's fixed.</h3>Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla.
    </div>
</div>

.container { 
    width: 500px;
    font-family: arial;
    font-size: 14px;
    border: 1px solid #eee;
    height: 190px;
    margin: 10px;
    box-shadow: 0 0 5px 0 #eee;
    border-radius: 5px;
 
    .left { 
        float:left;
        width: 140px;
        height: 180px;
 
        ul {
            width: 140px;
            background: #eee;
            padding: 5px;
            margin: 10px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
        ul li {
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #f9f9f9;
            padding: 6px 0;
        }
        ul li:first-of-type {
            border-top: none;
        }
        ul li:last-of-type {
            border-bottom: none;       
        }
        ul li a { 
            display: block;
            color: #888;
            text-shadow: 0 1px 0 #fff;
            text-decoration: none;
        }
        ul li ul { 
            opacity: 0;
            position: absolute;
            width: 140px;
            padding: 5px;
            left: 163px;
            margin-top: -30px;
            background: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 3px;
            transition: opacity .25s ease-in-out;
        }
        ul li ul.fixed {
            /* This is how we fix the problem, attaching the fixed class and setting a negative z-index will hide the element behind any other elements. We could also set a higher z-index on the right block to achieve the same. */
 
            z-index: -1;
 
            /* End fix */
        }
        ul li:hover > ul { 
            opacity: 1;
            z-index: 2000;  
        }
        span {
            font-size:20px;
            color: #333;
            position: relative;
            bottom: -45px;
            left: 5px;
        }
    }
    .right { 
        float:right;
        width: 300px;
        margin: 10px;
 
        h3 {
            font-size: 26px;
        }
    }
}