Estoy intentando hacer un menu con submenus en css, la verdad que no manejo nada CSS y estoy intentando seguir tutoriales pero no consigo hacer lo que quiero.
Al pulsar sobre Europa, el submenu conteniendo a Germany y Holland deberia aparecer a la derecha, pero por mas que lo intento no me sale, me sale una linea abajo.
Imagino que tendra que ver con algun float, pero llevo hoy intentandolo varias horas y no soy capaz... me echais una mano??
El codigo css con el que estoy trabajando es este.
#menu {
list-style:none;
}
#menu li {
font:bold 16px "Trebuchet MS", Arial, Tahoma;
float:left;
position:relative;
margin-right:5px;
}
#menu li a {
background:#6abcc7;
color:#fff;
text-decoration:none;
text-align:center;
display:block;
width:142px;
min-height:27px;
padding-top:4px;;
}
#menu li a:hover {
background:#97d1da;
}
#menu li ul {
border:1px solid #1693a5;
display:none;
position:absolute;
}
#menu li:hover ul {
display:block;
list-style:none;
}
#menu li ul li {
font-size:14px;
font-weight:normal;
margin:0;
}
#menu li ul li a {
padding-left:15px;
background:#6abcc7 url('img/bullet.png') no-repeat 5px 12px;
text-align:left;
}
#menu li ul li a:hover {
background:#6abcc7 url('img/bullet.png') no-repeat 5px 12px;
}
#menu li ul li a.odd {
background:#97d1da url('img/bullet2.png') no-repeat 5px 12px;
}
#menu li ul li a.odd {
background:#97d1da url('img/bullet2.png') no-repeat 5px 12px;
}
#menu li ul li ul {
border:none;
}
#menu li ul li ul li {
margin: 0;
border: 0 none;
padding: 0;
display:none;
}
#menu li ul li:hover ul li {
display:block;
}
#menu li ul li ul li {
font-size:14px;
font-weight:normal;
margin:0;
left: 160px!important;
}
Muchas gracias por vuestro tiempo.
