Foros del Web - Ver Mensaje Individual

willyfc · #4 (**permalink**) 09/06/2009, 09:24

Aquí una forma más corta de hacerlo, espero te sirva, es solo la parte del menú, lo he probado en IE6, FF3, Chrome 2 y safari.

Código html:

Ver original<!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=iso-8859-1" />
<title>Menu para Irulan</title>
<style type="text/css">
#menu{width:100%; height:6em; background:#000; position:relative; text-align:center;}
#menu a{display:block; color:#CCC; text-decoration:none;width:120px; height:4em; padding:32px 0 0 0; float:left; border-right:3px solid #999}
#menu a:hover{ display:block; color:#333; background:#CCC;width:120px; height:4em; float:left;}
#menu a:hover span{display:block; color:#FFF; width:200px;}
 
#menu a span {position: absolute;top: 25px;right:10%;display:none;color:#FFF;}
#menu a:focus span{ display:block;}
</style>
</head>
 
<body>
<div id="menu">
    <a href="#">Home<span>Home</span></a>
    <a href="#">Portafolio<span>visita mis proyectos de dise&ntilde;o grafico y web</span></a>
    <a href="#">Curriculum<span>Mi historia...Conoceme!!!</span></a>
    <a href="#">Contacto<span>Contacto</span></a>
</div>
</body>
</html>

ya nos comentarás.