A ver, toma nota.
Cambios:
1. Cambio del 'style' del 'menu'
Código:
div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 1px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
por:
Código:
div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 130px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
en negrita está lo que cambia. (el valor 130 lo puedes cambiar por otro)
2.- Cambio en la anchura del 'menubar'
Código:
<div class="menuBar" style="width:90%; position: absolute; left: 0px; top: 125px;">
por:
Código:
<div class="menuBar" style="width: 130px; position: absolute; left: 0px; top: 125px;">
en negrita lo que cambia (el valor 130, lo puedes cambiar, pero ojo, el de arriba debe ser igual. si no queda feo. por ejemplo si pones 100, en los dos tiene que ser 100)
3.- Busca está línea:
Código:
button.menu.style.left = x + "px";
y añádele dos barras // delante. que te quede así:
Código:
//button.menu.style.left = x + "px";
Con estos tres cambios, básicamente ya lo tienes. Pero queda un poco freo. Entonces, vamos a retocar un poco los estilos.
En el estilo del 'div.menuBar a.menuButton', añade
line-height:25px;
es decir, que te quede así:
Código:
div.menuBar a.menuButton {
background-color: #d0d0d0;
border: 1px solid #d0d0d0;
color: #000000;
cursor: hand;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
line-height:25px;
}
y eso es todo. si no te aclaras, me lo dices y te paso el código corregido.
un saludete.