IMAGEN CON MENU CON HTML5 Y CSS[code="html4strict"][/code]
Hola tengo tiempo intentando hacer una lista de una imagen con "menu" , no sabria como decirlo =D
aqui les dejo una imagen de lo que hice
esto es lo que he logrado, solo 1 imagen
esto es lo que quiero conseguir:
hacer mas de 1 "foto menu", tener mas "fotomenus"
aqui les dejo los codigos
el HTML
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Menus desplegable solo CSS ejemplo 9 - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="español" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/menu-9.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1"></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie"><table class="falsa"><tr><td><![endif]-->
<ul>
<li><a class="primera" href="#">Ver online</a></li>
<li><a href="#">Descargar</a></li>
<li><a href="">cancelar</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
codigo CSS
Código:
* { margin: 0px;padding: 0px; outline: 0;}html, body { width: 100%;}body { background: #310;font-family: Verdana, Arial, Helvetica, sans-serif;}
#menu { width: 240px;height: 320px; background-image: url('../Erase_una_vez_Serie_de_TV-526092991-large.jpg');font-size: 0.7em;margin: 20px;position: relative;}
#menu ul { list-style-type: none;}
#menu ul li a.primera { border-top: solid 1px #FFF;}
#menu ul li a.nivel1,
#menu ul li a.nivel1 { width: 24px;height: 23px;background-image: url('../img/flechita.png');}
#menu ul li a {display: block;text-decoration: none;color: #fff;position: relative;text-align: center;}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;color: #000;position: relative;}
#menu ul li a.nivel1 {display: block!important;display: none;position: relative;}
#menu ul li ul {display: none;}
#menu ul li a:hover ul,
#menu ul li:hover ul {display: block;position: absolute ;top:23px;left:0;}
#menu ul li ul li a {width: 120px;background-color: #000;color: #fff;border: solid 1px #fff;border-top: none;padding: 8px;}
#menu ul li ul li a:hover {position: relative;background-color: #399;color: #FFF;}table.falsa {border-collapse:collapse;border:0px;float: left;position: relative;}
ayudenme que no puedo proseguir con mi proyecto, se los agradeceria muchisimo