menu.html
- Código: Selecionar tudo
<!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>Untitled Document</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="menui6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Serviços</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Gráfica</a></li>
<li><a href="#">Consultoria</a></li>
</ul>
</li>
<li><a href="#">Produtos</a>
<ul>
<li><a href="#">Site</a></li>
<li><a href="#">Cartão</a></li>
<li><a href="#">Loja Virtual</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</body>
</html>
estilo.css
- Código: Selecionar tudo
*{margin:0; padding:0;}
body{
font:12px Arial, Helvetica, sans-serif;
}
ul{
list-style-type:none;
}
ul#menu{
width:600px;
margin:0 auto;
}
ul#menu li{
position:relative;
float:left;
}
ul#menu li a{
display:block;
float:left;
padding:0 15px;
height:30px;
line-height:25px;
background:#030;
color:#FFF;
text-decoration:none;
}
ul#menu li a:hover{
background:#066;
}
ul#menu li ul{
display:none;
position:absolute;
top:30px;
left:0;
}
ul#menu li:hover ul,
ul#menu li.hover ul{
display:block;
}
ul#menu li ul li a{
width:120px;
border-bottom:1px solid #fff;
clear:both;
}
ul#menu li ul li{
float:none;
clear:both;
}
ul#menu li ul li a{float:none;}
menuie6.css
- Código: Selecionar tudo
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC){
who.MXPC = '1';
if(who.nodeName != 'A'){
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }
