Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
bom dia galera.
eu so meio que novato em css, e achei um menu bem legal na internet num site com artigos/tutoriais.
eu apenas copiei ele para entender e alterar, mas quando vou testar no firefox (pc) ou no safari (mac) ele não aparece o fundo do menu, que é uma imagem de background...
eu achei o menu aqui: http://www.cssplay.co.uk/menus/final_drop.html
e a única alteração técnica que eu fiz foi colocar um background-image no primeiro nivel do menu.
html:
<div class="menu">
<ul>
<li><a href="studio.php">Studio</a></li>
<li><a href="eventos.php">Eventos
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top: 17px;">
<li><a href="foto.php">Foto</a></li>
<li><a href="video.php">Vídeo</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="servicos.php">Serviços
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top: 17px;">
<li><a href="fotos_publicitarias.php">Fotos Publicitárias</a></li>
<li><a href="servicos_digitais.php">Serviços Digitais</a></li>
<li><a href="servicos_especiais.php">Serviços Especiais
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="encadernacao.php">Encadernação</a></li>
<li><a href="laminacao.php">Laminação</a></li>
<li><a href="impressao_gf.php">Impressão e Grande Formato</a></li>
<li><a href="molduras.php">Molduras</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="produtos.php">Produtos
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top: 17px;">
<li><a href="loja_virtual.php">Loja Virtual</a></li>
<li><a href="promocoes.php">Promoções</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
css:
.menu {
width: 778px;
font-size: 0.80em;
font-size: 12px;
font-family: arial;
position: relative;
z-index: 100;
margin-top: 135px;
_margin-top: -3px;
background-image: url('imagens/barra.jpg');
}
.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
float: right;
}
.menu ul ul {
width: 150px;
}
.menu li {
float: left;
width: 150px;
position: relative;
}
.menu a, .menu a:visited {
display: block;
font-size: 11px;
text-decoration: none;
color: #fff;
width: 139px;
height: 18px;
/*border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #758279;*/
padding-left: 11px;
line-height: 15px;
}
html .menu a, html .menu a:visited {
width: 150px;
w\idth: 139px;
}
.menu ul ul a.drop, .menu ul ul a.drop:visited {
/background: #d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;/
background-image: url('imagens/barra.jpg');
}
.menu ul ul a.drop:hover{
background-image: url('imagens/barra.jpg');
}
.menu ul ul :hover > a.drop {
background-image: url('imagens/barra.jpg');
}
.menu ul ul ul a, .menu ul ul ul a:visited {
font-size: 9px;
}
.menu ul ul ul a:hover {
background-color: #cccccc;
}
.menu ul ul {
visibility: hidden;
position: absolute;
height: 0;
top: 31px;
left: 0;
width: 150px;
}
* html .menu ul ul {
top: 30px;
t\op: 31px;
}
.menu ul ul ul{
left: 147px;
top: 0;
width: 150px;
}
.menu ul ul ul.left {
left: -150px;
}
.menu table {
position: absolute;
top: 0;
left: 0;
}
.menu ul ul a, .menu ul ul a:visited {
background-color: #999999;
color: #ffffff;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
}
* html .menu ul ul a{
width: 150px;
w\idth: 129px;
}
.menu a:hover, .menu ul ul a:hover{
color: #ffffff;
background: #999999 url('imagens/barra.jpg');
}
.menu :hover > a, .menu ul ul :hover > a {
color: #ffffff;
background: #999999;
}
.menu ul :hover ul{
visibility: visible;
}
.menu ul :hover ul ul{
visibility: hidden;
}
.menu ul :hover ul :hover ul{
visibility: visible;
}
agradeço ajudas!
abraço!
Carregando comentários...