Hola a todos!
Vereis esque tengo un menu que quiero hacer desplegable, pero el desplegable tengo que adaptarlo al que tengo actualmente y no se como hacerlo, os dejo el css de los dos y si necesitais algun dato mas o la imagen del menu o algo decidmelo.
Si creeis que hay alguna forma mejor de hacer mi menu desplegable que no sea adaptandolo al que he encontrado, explicadmela por favor =)
Este es el css del menu que tengo actualmente
Código CSS:
Ver original/* Menu */
#menu {
width: 1000px;
margin: 0 auto;
padding: 0;
height: 50px;
background: url(images/img02.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 32px;
margin: 0;
padding: 18px 20px 0 30px;
text-decoration: none;
text-transform: capitalize;
background: url(images/img03.jpg) no-repeat right top;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
}
#menu .current_page_item a {
color: #FFFFFF;
}
Y este del menu desplegable que encontre
Código CSS:
Ver original* {margin: 0px;
padding: 0px; outline: 0;
}
html, body {width: 100%;
}
body {background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul {list-style-type: none;
}
#menu ul li {width: 162px;
}
#menu ul li.nivel1 { float: left;
margin-right: 1px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color:#00bf2b;
border: solid 1px #0a4e03;
padding: 8px;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;
position: absolute;
left: 161px!important;left: 160px;
top:0px!important;top: -21px;
}
#menu ul li ul li a {width: 160px;
padding: 8px 0px;
border-top-color: transparent;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #fff;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
Gracias!