Necesito una ayuda para solucionar un problemilla con un menu. Tengo un menu que al pasar el mouse se desliza hacia la derecha un submenu pero este se queda debajo del menu principal. He estado probando con "overflow" pero no consigo hacer que salga por completo, os dejo una imagen del problema y os pongo tambien el archivo css para que podais ver como esta hecho.
https://drive.google.com/file/d/0B_5EG8bBKEBvODExNVJMR0FGcU0/edit?usp=sharing
Código PHP:
@charset "utf-8";
/* CSS Document */
#contenedor{
text-align: left;
width: 860px;
margin: auto;
}
body {
background: url(../images/NOX_Textures_157_18.jpg) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #FFF;
width:100%;
margin : 20px 0px 20px 0px;
text-align: center;
border-radius:5px;
}
#header{
background: url(../images/top_bg.png) no-repeat;
margin-left: /*200*/0px;
height : 50px;
width: 860px;
border-radius:5px;
font-family:"Comic Sans MS";
font-size:36px;
letter-spacing: 0.3em;
text-align:center;
}
/*-------BARRA HORIZONTAL NAV O MENU-------*/
/*#navegador{
background : url(../images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}*/
/*-------- FIN BARRA --------*/
#quien{
width:860px;
margin-left:/*200*/0px;
margin-top:20px;
border:1px solid #F39;
border-radius:5px;
background-color:#666;
text-align:left;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: #FFF;
padding-top:15px;
padding-bottom:15px;
}
.quien1{
text-align:left;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#cuerpo{
width:720px;
background: -webkit-linear-gradient(#333,#999);/*para aplicar un degradado lineal, son las 4 lienas*/
background: -moz-linear-gradient(#333,#999);
background: -o-linear-gradient(#333,#999);
background: linear-gradient(#333,#999);
border:1px solid #F39;
border-radius: 5px;
margin-top: 20px;
margin-left:/*200*/0px;
margin-right:0px;
float: left;
overflow: visible;
}
h1{
font-size: 12pt;
color:#FFF;
}
/* Menú vertical con subpestañas http://ciudadblogger.com/2011/06/menu-vertical-con-subpestanas-hecho.html--------------------------- */
#menuvertical {
text-align: center;
width: 100%;
}
#menuvertical ul {
list-style-type: none;
margin-top: 20px;
margin-left:-25px;
border-radius: 5px;
float: left;
}
#menuvertical ul li.nivel1 {
width: 120px;/* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
border-radius: 5px;
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #666; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-radius: 5px;
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 110px[U][B]/[/B][/U];
top: -1px;
}
#menuvertical ul li ul li a {
width: 100px;
background-color: #666; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}
/* -------FOOTER-------*/
#footer {
margin-top:280px;
margin-left:/*200*/0px;
width:860px;
/*height:auto;*/
border:1px solid #F39;
border-radius:5px;
background: -webkit-linear-gradient(#333,#999);/*para aplicar un degradado lineal, son las 4 lienas*/
background: -moz-linear-gradient(#333,#999);
background: -o-linear-gradient(#333,#999);
background: linear-gradient(#333,#999);
}
.img-footer{
background: url(../images/contactos.png) no-repeat;
margin-left:210px;
margin-top:5px;
width:430px;
height:50px;
padding-bottom:10px;
}
.blog{
background: url(../images/blog-32.gif) no-repeat;
width:32px;
height:32px;
margin-left:200px;
padding-bottom:10px;
}
.face{
background: url(../images/F-icon-trans-127.gif) no-repeat;
width:32px;
height:32px;
margin-left:234px;
padding-bottom:10px;
}
.mail{
background: url(../images/Mail-127.gif) no-repeat;
width:32px;
height:32px;
margin-left:238px;
padding-bottom:10px;
}
Edito: solucionado no me di cuenta que tenia una barra despues del valor de la posicion del submenu, lo he subrayado y negrita.
"left: 110px/;"
Gracias y un saludo.
