Hola
espero puedan echarme un cable,
me gustaria poder cargar una imagen cuando el raton esta sobre algunas de las opciones que se desplegan del menu, estoy teniendo algunos problemas...espero puedan ayudarme
os adjunto el codigo,
muchas gracias
//////Html/////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="css/menu.css">
</head>
<ul>
<li>Desplegable
<ul>
<li>01</li>
<li>02</li>
<li>03 </li>
<li>04</li>
</ul>
</li>
</ul>
<body>
</body>
</html>
//////CSS/////
body {
font-family: 'Helvetica', 'Helvetica', Helvetica, Arial, Helvetica;
padding: 20px 50px 150px;
font-size: 30px;
text-align: center;
background: #5DB7E6;
color: #fff;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 30px/18px Helvetica;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #F41439;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #5DB7E6;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 250px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li{
background: #53A3D9;
display: block;
color: #fff;
}
ul li ul li:hover { background: #F9E70B;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}