Dark Menu desplegable y flotante CSS






Bueno esto es un menu flotante que hice hace pocos minutos, esto se logra mediante la posicion "fixed" con CSS, lo que hace que un determinado objeto mantenga su posicion en el navegador, es decir, dara el efecto de que esta flotando sobre nuestra web, es muy sencillo obtenerlo, solo sigan los siguientes pasos:

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:
<style type="text/css">
...aqui el codigo...
</style>
  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:
#dark-litle-menu {
    backgroundurl("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlb0qBpuPZo-Eby2GX87bmzV9LmOQvKuD84y7dkhSfXqx70TAgltti8JXmStQsbVdfasGoxmXcc9Kj4OptbI1By2JgeWIrUL1eTs7PJO8dydfz7nCs6iVHxsjCiVZ9nvTFAAt8un4PQ_qv/s1600/bg-dark-menu.jpg") repeat-x scroll center top #393939;
    border-top3px solid #333;
    positionfixed;
    width100%;
    z-index900;
}

#dark-litle-menu > ul {
    height54px;
    list-stylenone outside none;
    margin0 auto;
    padding0;
    width970px;
}
#dark-litle-menu ul > li {
    floatleft;
    font-familyArial,Helvetica;
    positionrelative;
}
#dark-litle-menu a {
    border-left1px solid rgba(255, 255, 255, 0.1);
    border-right1px solid rgba(0, 0, 0, 0.2);
    line-height1.2;
    displayblock;
    font-familyArial;
    font-size13px;
    font-weightbold;
    padding16px 25px 22px;
    text-decorationnone;
    text-shadow0 1px 2px #111;
}

#m-des {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22_9Bt_1aD7oAv-J5htz0XnUA18UqmRB6E0nH26CgKz54QUmHhWOMV2mUUZQHt5Usdx0gA0YX5wJnLzLaRB13M932L71mWLkUynKa8HICchlKOGfzomk1DSwKW4TDJQ6ycPQFyIhyphenhyphenc-Yx/s1600/bg-submenu.jpg") repeat scroll center top #393939;
    border-radius0 0 4px 4px;
    height0;
    left0;
    list-stylenone outside none;
    margin0;
    overflowhidden;
    padding: 0;
    positionabsolute;
    top54px;
    width160px;
    z-index50;
}
#dark-litle-menu li:hover #m-des {
    padding15px;
    heightauto;
    box-shadow0 12px 0 0 rgba(255, 255, 255, 0.02) inset, 0 7px 7px -6px rgba(0, 0, 0, 0.5) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
}

#m-des li > a {
    backgroundnone repeat scroll 0 0 transparent !important;
    border-bottom1px solid #2C2B2B;
    border-leftmedium none !important;
    border-rightmedium none !important;
    border-top1px solid #3E3E3E;
    color#999;
    padding8px 0 !important;
    text-shadow0 1px 1px #111;
}

#dark-litle-menu li:hover a {background: rgba(255, 255, 255, 0.05);}
#dark-litle-menu li:first-child a {border-left0 none;}
#dark-litle-menu li:last-child a {border-right0 none;}
#m-des > li {floatnone !important;}
#m-des li > a:hover {color#EEE;}
#m-des li:first-child a {border-topmedium none !important;}
#m-des li:last-child a {border-bottommedium none !important;}
.espacer-black {padding-top57px;}

#dark-litle-menu span {
    backgroundrgba(0, 0, 0, 0.6);
    border2px solid rgba(0, 0, 0, 0.9);
    border-radius3px;
    bottom-5px;
    color#FFF;
    displayblock;
    font-size11px;
    font-weightnormal;
    padding3px 8px;
    positionabsolute;
    right-8px;
    text-shadow0 1px 0 #333;
    z-index50;
}
Ahora nos queda posicionar el menu, para ello buscan <body> y justo debo de eso ponen esto:
<div id="dark-litle-menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu desplegable</a>
    <ul id="m-des">
        <li><a href="#">Seccion 1</a></li>
        <li><a href="#">Seccion 2</a></li>
        <li><a href="#">Seccion 3</a></li>
        <li><a href="#">Seccion 4</a></li>
    </ul>
    </li>
    <li><a href="#">Menu new 1<span class="new-iten">new</span></a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu new 2<span class="new-iten">new</span></a></li>
</ul>
</div>
<div class="espacer-black"></div>