Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tenho o seguinte menu: http://www.infowaysi.com/menu/menu.php
coloquei background-color: red; na área da div menu, que tem 38px height.
No FF ele fica certinho, com a div "submenu" (vermelho claro) logo abaixo dos 38px.
Já no IE ele não fica só os 38px, ficando uma sobra de background entre os elementos do menu e o submenu. E aí reside meu primeiro problema.
o css do menu:
body{
text-align:center;
background: url(imagens/FUNDO.gif) repeat;
font-family:verdana,arial,helvetica,sans-serif;
font-size:80%;
margin:0px;
padding:0px;
}
#tudo {
position: relative;
width:760px;
text-align:left;
margin:0px auto 0px auto;
}#menu {position: relative; width:760px; height:38px; margin: 35px 0px 0px 0px; background-color:red;} / define o posicionamento do menu /
#menu ul { list-style: none;} / define que não vai ter estilo de lista /
#menu ul li { display: inline; } / define que todos os LI´s vão ficar em horizontal /
#menu ul li.primeira { margin-left: 0; } / define que o primeiro LI nao vai ter margem esquerda, alinhando-se a tudo /
#menu ul li a.selecionado { background-image: url(imagens/menu_sel.gif); color: #cacaca; text-decoration: none; padding: 8px 1px 0px 0px;}
/ define fundo, cor de texto, e padding(alinhamento do texto) para o botao selecionado /
#menu ul li a:hover.selecionado { background-image: url(imagens/menu_sel.gif); color: #999999; text-decoration: none; padding: 8px 1px 0px 0px;}
/ define fundo, cor de texto e padding(alinhamento do texto) para botao selecionado quando ativo /
#menu ul li a:hover { background-image: url(imagens/menu_hover.gif); color: #FFF; text-decoration: none; }
/ define fundo cor e decoracao de texto para menu quanto ativo /
#menu ul li a {
float: left;
height: 38px; /* width e height definem tamanho do fundo */
width: 132px; /* width e height definem tamanho do fundo */
padding: 15px 1px 0px 0px; /* define local do texto */
background: url(imagens/menu.gif) no-repeat 0 0; /* define fundo */
color: #5f5f5f; /* cor do texto */
font-weight: bold; /* texto em negrito */
text-align: center; /* alinhamento do texto */
}
#submenu {
position: relative;
width: 760px;
height: 30px;
background-color: #ba3b3b;
background: url(imagens/submenu.gif) no-repeat 0 0;
border-bottom: 1px;
border-bottom-color: white;
border-style: solid;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br">
<head>
<link rel="stylesheet" href="estilomenu.css" type="text/css">
<script type="text/javascript" src="js/dropdown.js"></script>
</head>
<body>
<div id="tudo">
<div id="menu">
<ul>
<li class="primeira"><a href="index.php" class="selecionado">inicial</a></li>
<li><a href="aradio.php">a radio</a></li>
<li><a href="comercial.php">comercial</a></li>
<li><a href="eventos/">eventos</a></li>
<li><a href="contato.php">fale conosco</a></li>
</ul>
</div>
<div id="submenu"></div>
</div>
</body>
</html> O segundo problema é: como fazer o submenu, também na horizontal logo abaixo (vide div submenu)? Digo, como fazer que, ao passar o mouse em "a radio", abra as opções do submenu "quem somos", ...
Muito grato,
Carregando comentários...