Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

André Severino

Desafio iMasters - Nono menu

Recommended Posts

Bom dia pessoALL, bem estava tentando fazer o nono menu do desafio proposto pelo William - Link, só que quero fazer de uma forma diferente, utilizando apenas as setas, bom o que está acontecendo é que eu teria que ter um espaço de 29px do lado esquerdo e do lado direito, e nesse espaço eu iria usar o background, será que alguem tem alguma ideia de como fazer ? :(

 

bg_menu.jpg

bgmenul.jpg

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desafio imasters - nono menu</title>
<style type="text/css">
*{padding:0px; margin:0px; font:12px Arial;}
a{font-size:24px; color:#666; line-height:96px;}
a:hover{color:#FFF;}


ul{list-style:none; text-align:center; position:absolute;}
ul li{float:left; height:110px; width:200px; background:url(bg_menu.jpg) #D4D2D3 top right no-repeat; padding:0px 29px;}
ul li:hover{position:relative; height:110px; width:200px; background:url(bg_menu.jpg) #AAA no-repeat; background-position:229px -110px;padding:0px 29px;}
/*ul li.meio:hover{position:relative; height:110px; width:200px; background:url(bg_menu.jpg) #AAA no-repeat; background-position:-29px -220px;}*/

ul li#ultimo{background-image:none;}
ul li#ultimo:hover{position:relative; height:110px; width:200px; background:url(bg_menu.jpg) #AAA no-repeat; background-position:0px -220px;} /*tentei remover o padding mais não deu*/
</style>
</head>

<body>

<ul>
   <li><a href="#">Games</a></li>
   <li class="meio"><a href="#">Dicas</a></li>
   <li class="meio"><a href="#">Truques</a></li>
   <li class="meio"><a href="#">Outros</a></li>
   <li id="ultimo"><a href="#">Detonados</a></li>
</ul>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Adicione o plano de fundo aos elementos <a>

 

#menu a {
   background: url('...') top left no-repeat;
   display: block;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.