Muy buenas a todos.
He hecho un menu desplegable sin usar javascript. Lo que ocurre es que este se despliega cuando situo el ratón encima de la imagen que tengo como menu. Está puesto la pseudoclase a:hover en su css, a lo que voy es, sabéis como desplegar el menú pero que sea haciendo click sobre la imagen y no solo con situar el puntero en ella??
Ya que estáis si me decís a la vez que también cuando pase el puntero por la imagen me la cambie por otra.
Bueno pues esas 2 dudas me quedan para terminar el menu desplegable, muchas gracias. Espero vuestras soluciones, espero no me hagan copypaste que ya leí bastante pero no di con la solución.
Aquí os dejo un código de un desplegable que se abre al pasar el puntero por encima, a ver que cambio del css para que sea como os comento.
<div id="menu">
<div class="buton">
<a href="URL">webs</a>
<div>
<ul>
<li>
<a href="URL">pasos</a>
</li>
<li>
<a href="URL">Crear</a>
</li>
<li>
<a href="URL">Colgar</a>
</li>
</ul>
</div>
</div>
EL CSS es este:
#menu {
width: 100%;
height: 30px;
margin: 0 auto;
background: url(imgagen.jpg) repeat-x; }
.buton {
width: 19.88%;
height: 30px;
float: left;
text-align: center;
margin-left: 1px;
background: url(imgagen.jpg) repeat-x;
font-weight: bold;
font-size: 75%;
line-height: 30px; }
.buton:hover { background: url(imagen.jpg) repeat-x; }
.buton a {
color: white;
text-decoration: none;
display: block; }
.boton a:hover { color: black; }
.buton div {
position: relative;
width: 94.5%;
background: url(img/desplegable3.png);
font-size: 100%;
visibility: hidden;
text-align: left;
padding: 10px 2px 10px 10px;
font: bold 100% arial; }
.buton:hover div { visibility: visible; }
.buton ul {
margin: 0 10px;
padding: 0;
list-style-image: url(imagen.png); }
.buton li a {
color: white;
text-decoration: none;
padding: 3px; }
.buton li a:hover { color: #fa6; }
gracias