Menú Vertical, con transparecnia

Menú vertical con transparencia para IE7 - IE10, Chrome

by MiguelR

HTML

<div id="nav-container">
    <div id="transparente">
        <div class="hide"></div>
    </div>
    <nav>
        <ul>
            <li><a href="/">Home</a>

            </li>
            <li class="first-level"><a href="/">Our Products</a>

                <ul class="hide">
                    <li><a href="/">Histograma</a>

                    </li>
                    <li><a href="/">Por Tipo</a>

                    </li>
                    <li><a href="/">Por Viaje</a>

                    </li>
                    <li><a href="/">Incurrido</a>

                    </li>
                    <li><a href="/">Carretas</a>

                    </li>
                    <li><a href="/">Patio</a>

                    </li>
                </ul>
            </li>
            <li class="first-level"><a href="/">Our Caring</a>

                <ul class="hide">
                    <li><a href="/">Dias</a>

                    </li>
                    <li><a href="/">Toneladas</a>

                    </li>
                    <li><a href="/">Liberaciones</a>

                    </li>
                    <li><a href="/">Clima</a>

                    </li>
                </ul>
            </li>
            <li class="first-level"><a href="/">Our Company</a>

                <ul class="hide">
                    <li><a href="/">Comentario</a>

                    </li>
                    <li><a href="/">Preemergente</a>

                    </li>
                    <li><a href="/">Cultivo</a>

                    </li>
                    <li><a href="/">Abono</a>

                    </li>
                    <li><a href="/">Metereológica</a>

                    </li>
                    <li><a href="/">Información</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

CSS

/* Imagen de fondo. */
 body {
    background: url(http://1.bp.blogspot.com/-tMcpeIB_gNI/T4ma2zDt6yI/AAAAAAAAZro/eWDLUPsVr3Q/s640/Homero-Simpson_The-Simpsons_05.jpg);
}
/* Link sin decoración. */
 #nav-container a {
    color: #FFF;
    text-decoration: none;
}
#nav-container a:hover {
    color: #11C0E8;
}
.hide {
    display: none;
}
/* Lista sin decoración. */
 #nav-container li {
    list-style: none;
}
#nav-container {
    position: relative;
}
#nav-container nav {
    display: block;
    font-size: 20px;
}
#nav-container nav > ul {
    padding-bottom: 20px;
}
#nav-container nav > ul > li {
    float: left;
    line-height: 60px;
    padding: 0 25px;
}
#nav-container nav, #transparente div {
    margin: 0 auto;
    position: relative;
    width: 670px;
}
/* Menú primer nivel. */
 #nav-container .first-level {
    width: 120px;
    text-align: right;
}
#nav-container .first-level ul {
    margin-left: -50px;
    line-height: normal;
}
/* Fundo transparente. */
 #transparente, #transparente div {
    background: #F00;
}
#transparente {
    filter: alpha(opacity=90);
    height: 60px;
    left: 0px;
    opacity: 0.9;
    position: absolute;
    width: 100%;
}
#transparente div {
    height: 150px;
    top: 60px;
}

JavaScript

$('.first-level').hover(function () {
    $('#transparente div').stop(false, false).slideToggle(500);
    $(this).children('ul').stop(false, false).toggle("slow");
})