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 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlb0qBpuPZo-Eby2GX87bmzV9LmOQvKuD84y7dkhSfXqx70TAgltti8JXmStQsbVdfasGoxmXcc9Kj4OptbI1By2JgeWIrUL1eTs7PJO8dydfz7nCs6iVHxsjCiVZ9nvTFAAt8un4PQ_qv/s1600/bg-dark-menu.jpg") repeat-x scroll center top #393939;
border-top: 3px solid #333;
position: fixed;
width: 100%;
z-index: 900;
}
#dark-litle-menu > ul {
height: 54px;
list-style: none outside none;
margin: 0 auto;
padding: 0;
width: 970px;
}
#dark-litle-menu ul > li {
float: left;
font-family: Arial,Helvetica;
position: relative;
}
#dark-litle-menu a {
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.2);
line-height: 1.2;
display: block;
font-family: Arial;
font-size: 13px;
font-weight: bold;
padding: 16px 25px 22px;
text-decoration: none;
text-shadow: 0 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-radius: 0 0 4px 4px;
height: 0;
left: 0;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 54px;
width: 160px;
z-index: 50;
}
#dark-litle-menu li:hover #m-des {
padding: 15px;
height: auto;
box-shadow: 0 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 {
background: none repeat scroll 0 0 transparent !important;
border-bottom: 1px solid #2C2B2B;
border-left: medium none !important;
border-right: medium none !important;
border-top: 1px solid #3E3E3E;
color: #999;
padding: 8px 0 !important;
text-shadow: 0 1px 1px #111;
}
#dark-litle-menu li:hover a {background: rgba(255, 255, 255, 0.05);}
#dark-litle-menu li:first-child a {border-left: 0 none;}
#dark-litle-menu li:last-child a {border-right: 0 none;}
#m-des > li {float: none !important;}
#m-des li > a:hover {color: #EEE;}
#m-des li:first-child a {border-top: medium none !important;}
#m-des li:last-child a {border-bottom: medium none !important;}
.espacer-black {padding-top: 57px;}
#dark-litle-menu span {
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(0, 0, 0, 0.9);
border-radius: 3px;
bottom: -5px;
color: #FFF;
display: block;
font-size: 11px;
font-weight: normal;
padding: 3px 8px;
position: absolute;
right: -8px;
text-shadow: 0 1px 0 #333;
z-index: 50;
}
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>