Problema com menu horizontal.
Olá! Gostaria de saber o erro do meu script. (Eu explico no final de tudo, vá lá embaixo!)
Vejam o CSS:
@charset "utf-8";
/ CSS Document /
#menu, #menu * {margin: 0; padding:0;}
#menu {
position:absolute;
padding:0px;
margin:0px;
float: left;
width: 200px;
list-style:none;
}#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 18px;
background-image:url(menu_esq.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
float:left;/ visual do link /
color: #e68600;
text-decoration: none;
border-bottom:30px solid #e68600;
}#menu ul li a:hover {
background-color:#1f1f1f;
color:#FFFFFF;
border-bottom:30px solid #1f1f1f;
}
ul.seta{ background-image:url(seta.png);
border-right-color:#009900;
padding:0px;
margin:0px;
}list-style-image:url(seta.png);
}#menu3, #menu3 * {margin: 0; padding:0;}
#menu3 {
position:absolute;
margin-left:-456px;
padding:0px;
float: left;
width: 303px;
list-style:none;
background-color:black;
}#menu3 ul li { display: inline;}
#menu3 ul li a {
padding: 3px 6px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
float:left;
color:#fe461b;
background-color:#000000;/ visual do link /
border-bottom:30px solid #e68600;
}#menu3 ul li a:hover {
color:#e68600;
background-color:#666666;
padding: 3px 6px;
border-bottom:30px solid #e68600;
}
#tudo
{width:750px; margin: 0 auto; padding: 0;}
#topo{
background-image:url(topo.jpg);
margin-top:0px;
width:800px;
height:71px;
float:left;
}
#menu1{
background-color:#333333;
height:13px;
margin-top:73px;
width:180px;
position:absolute;
}
#menu2{
background-color:#1f1f1f;
height:13px;
margin-top:23px;
width:420px;
position:absolute;
}
#busca{
background-image:url(busca.jpg);
width:164px;
height:36px;
margin-left:216px;
margin-top:71px;
position:absolute;
}
#foto{
background-image:url(hospital.jpg);
height:202px;
width:215px;
margin-left:420px;
background-repeat:no-repeat;
position:absolute;
top: -96px;
}
#fundotab{
background-color:#e68601;
margin-top:209px;
height:57px;
width:746px;
margin-left:40px;
position:absolute;
top: 1px;
visibility: visible;
}
#fundotab2{
background-color:#333333;
margin-top:20px;
height:500px;
width:730px;
margin-left:0px;
position:absolute;
top: 1px;
}
#fotolab{
background-image:url(home.jpg);
margin-left:32px;
margin-top:-50px;
width:237px;
height:323px;
position:absolute;
top: 1px;
}
#conteudo1{ font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#FFFFFF;
width:450px;
height:300px;
margin-left:220px;
position:absolute;
margin-top:35px;
float:left;
}
ul{ list-style-image:url(marcador.jpg);
position:absolute;
float:left;
padding-left:30px;
padding-top:20px;
margin-left:10px;
line-height:20px;
}p{
font:Verdana, Arial, Helvetica, sans-serif;
color:#CC3300;
font-size:9px;
margin-top:0px;
margin-bottom:-10px;
padding:0px;
line-height:3px;
}li{
padding-left:0px;
padding-top:0px;
}body {
margin:0px;
padding:0px;
background:black;
}Agora o XHTML:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página Laboratório - Teste</title>
<style>
@import url('estilo.css');
</style>
</head>
<body>
<div id="tudo">
<div id="topo">
<div id="menu1">
<div id="menu">
<ul>
<li><a href="">home</a></li>
<li><a href="">links</a></li>
<li><a href="">labs</a></li>
</ul>
<div id="menu2">
<div id="foto">
<div id="busca">
<div id="menu3">
<ul class="seta">
<li><a href="">recursos</a></li>
<li><a href="">trabalhe conosco</a></li>
<li><a href="">nossa empresa</a></li>
</ul></div></div></div></div></div></div>
<div id="fundotab">
<div id="fundotab2">
<div id="fotolab">
<div id="conteudo1">
<ul>
<li><p>Texto</p><br /> Texto, Texto etc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal e tal e tal eetc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal<br />
<br />
</li>
<li><p>Texto 2</p> <br />
Texto, Texto etc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal e tal e tal e tal etc e tal e tal e tal e </li>
</ul>
</div>
</div></div></div></div></div>
</div>
</body>
</html>O arquivo hospedado no meu website:
http://www.urieljuliatti.net/laranja/
Como podem ver.. O segundo menu que se chama "#menu3" e que na página aparece nos links "rtecursos", "trabalhe conosco" e "nossa empresa" está apresentando o MESMO background do "#menu", o que nao é para acontecer. Mesmo mudando o background no "#menu3" não altera em nada. Qual seria o problema?
Agradeço desde já pela colaboração de todos que se dispuserem a me ajudar!
Abraços.
Discussão (3)
Carregando comentários...