¿cómo hago que en vez de hacer clic aparezca el div, sino que con solo pasar el mouse aparezca el div?
Código:
<!DOCTYPE html>
<html>
<head>
<title>Ayuda TodoExpertos.com - @JuanGarciaR</title>
<script src="http://bphpd.comlu.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#mostrar').click(function(){
$('#capa').toggle('slow').css('display','block');
});
});
</script>
<style type="text/css">
#preferencias{width: 22px; height: 22px; float: right; margin: 0px 5px 0px 0px}
#crearcontenido{width: 22px; height: 22px; float: right; margin: 0px 5px 0px 0px}
#mensajes{width: 22px; height: 22px; float: right; margin: 0px 0px 0px 0px}
#nombre{ float: right; margin: 0px 0px 0px 0px}
#salir{width: 22px; height: 22px; float: right; 0px 5px 0px 0px}
#capa{
position: absolute;
display: none;
background: #330000;
}
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div id="nombre">
<a href="http://localhost/bphpd/admin/">
<em>Adrián</em> <em>Olmedo</em>
</a>
<a href="/bphpd/index.php?doLogout=true">
<img src="http://localhost/bphpd/archivos/logout.png" width="22" height="22" title="Salir" />
</a>
</div>
<div id="mensajes">
<a class="Estilo1" href="http://localhost/bphpd/admin/mensajes/">
<img src="http://localhost/bphpd/archivos/inbox.png" width="22" height="22" border="0" title="Bandeja de Entrada" />
</a>
</div>
<div id="crearcontenido">
<a class="Estilo1" href="http://localhost/bphpd/admin/crearcontenido/">
<img src="http://localhost/bphpd/archivos/filenew.png" width="22" height="22" border="0" title="Crear un Contenido Nuevo" />
</a>
</div>
<div id="preferencias">
<a href="#" id="mostrar">
<img src="http://localhost/bphpd/archivos/preferences_system.png" title="Preferencias del Blog" />
</a>
<div align="justify" id="capa">
<ul>
<li>
<a href="#">SubMenú 1</a>
</li>
<li>
<a href="#">SubMenú 2</a>
</li>
<li>
<a href="#">SubMenú 3</a>
</li>
</ul>
</div>
</div>
</body>
</html>