Holass
Veran estoy dandole vueltas a una hoja de estilos donde tengo un menu y quiero dentro del div del menu meter una imagen y que esta imagen no cumpla con algunas de las condiciones de ese div
en concreto el div menu es este
Código:
.menu {font-size:14px;padding:0px; float:right; width:700px;}
.menu ul {padding:0;margin:0;list-style-type:none; height:28px; background:#2359aa;}
.menu ul ul {width: auto;}
.menu ul li {float:left;height:28px;line-height:28px;}
.menu ul ul li {display:block;width: auto;height:auto;position:relative;line-height:1em; border-bottom:1px #2384BF solid;}
.menu a, .menu a:visited {display:block;float:left;height:100%;font-size:14px;text-decoration:none;color:#fff;background:#2359aa;padding:0 26px 0 22px;font-weight:bold;}
.menu a.current{background:#3da1e0;}
.menu ul ul a, .menu ul ul a:visited {display:block;background:#2359aa; color:#fff;width:12em;height:100%;line-height:1em; padding:0.5em 1em;}
.menu ul table ul a, .menu ul table ul a:visited {width:14em; w\idth:12em;}
.menu table {position:absolute; left:0; top:0; z-index:-1;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}
.menu li:hover {position:relative;}
.menu ul ul ul a, .menu ul ul ul a:visited {background:#3da1e0;}
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#3da1e0;}
.menu ul :hover a.sub1 {background:#3da1e0;}
.menu ul ul :hover a.sub2 {background:#3da1e0;}
.menu a:hover {color:#fff;background:#3da1e0;}
.menu :hover > a {color:#fff;background:#3da1e0;}
.menu ul ul a:hover{color:#fff;background:#3da1e0;}
.menu ul ul :hover > a {color:#fff;background:#3da1e0;}
.menu ul ul ul a:hover {background:#3da1e0;}
.menu ul ul ul :hover > a {background:#3da1e0;}
.menu ul ul ul ul a:hover {background:#eee;}
.menu ul ul {visibility:hidden;position:absolute;height:0;top:28px;left:0;width:14em;}
.menu ul ul ul{left:14em;top:0;width:14em;}
.menu ul ul ul.left {left:-14em;}
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{visibility:visible;}
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
y luego el html
Código:
<div class="menu">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="quienes-somos.html">Quienes somos</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><img src="images/es-on.png" width="38" border="0" /><img src="images/fr-off.png" width="38" border="0" /></li>
</ul>
</div>
Asi como esta se ve perfecto, pero cuando a esas imagenes le pongo un enlace se jode el invento y eso es lo que quiero hacer, que las imagenes no cambien de estilo cuando les añada un <a href="#">
¿podriais iluminarmeee un poco?
Muchas gracias a todos