Jump to content


Photo

Problemas Menu Dropdown


  • Faça o login para participar
4 replies to this topic

#1 vessco

vessco

    Novato no fórum

  • Usuários
  • 20 posts
  • Sexo:Não informado
  • Localidade:Guarapuava, PR

Posted 19/09/2012, 16:31

Olá, boa tarde a todos.

Gostaria de criar um dropdown menu para a seção de produtos do seguinte site: http://www.cochise.com.br/multipine
Porém como estou trabalhando com divs e as classes com imagens de fundo não estou conseguindo utilizar o <ul> e <li>

Os códigos para o menu são os seguintes:

<div class="divtopomenu">  
				<div class="on-the-left"><a href="#" class="menuhome" title="Home"></a></div>
                <div class="on-the-left"><a href="#" class="menucompany" title="Company"></a></div>
                <div class="on-the-left"><a href="#" class="menuproducts" title="Products"></a></div>
                <div class="on-the-left"><a href="#" class="menuservice" title="Service"></a></div>
                <div class="on-the-left"><a href="#" class="menugooddeal" title="Good Deal"></a></div>
                <div class="on-the-left"><a href="#" class="menunetwork" title="Network"></a></div>
                <div class="on-the-left"><a href="#" class="menunews" title="News"></a></div>
                <div class="on-the-left"><a href="#" class="menucontactus" title="Contact Us"></a></div>     
          </div>

E o CSS o seguinte:

a.menuproducts {
	display: block;
	width: 81px;
	height: 168px;
	text-decoration: none;
	background: url("imagens/imgmenu/menu_products.png");
	}

a.menuproducts:hover {	
	background-position: -81px 0;
	}


* coloquei apenas o de produtos, porém os outros seguem o mesmo padrão de código.


Se alguém puder me dar uma luz.
Grato pela ajuda.
raphaelkoszalka

#2 pyro3x

pyro3x

    E

  • Usuários
  • 201 posts
  • Sexo:Masculino

Posted 21/09/2012, 09:54

Não testei, mas tente algo assim:

<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>

ul{list-style:none;padding:0px;margin:0px;height:186px;}
ul li{display:inline-block;}

li a{
	display:block;
        width: 81px;
        height: 168px;
        text-decoration: none;
        background-image: url("imagens/imgmenu/menu_products.png");
	background-repeat:no-repeat;
	background-color:transparent;
	background-position:0px 0px;
}
li a:hover {  
        background-position: -81px 0;
}



#3 Jessica-riberio

Jessica-riberio

    Novato no fórum

  • Usuários
  • 14 posts
  • Sexo:Feminino
  • Localidade:Rio de Janeiro

Posted 24/09/2012, 12:53

Dê uma olhada nesse artigo e vê se te ajuda: Criando um menu dropdown com html e css
Jéssica Ribeiro - Webdesigner

#4 vessco

vessco

    Novato no fórum

  • Usuários
  • 20 posts
  • Sexo:Não informado
  • Localidade:Guarapuava, PR

Posted 05/02/2013, 08:19

Pyrox, eu pensei em fazer assim também "puxando a imagem" o problema é que cada opção do menu vai ter uma imagem lateral diferente, dai tinha que ver como diferenciar as imagens de cada opção. Foi ai que eu 'empaquei'.
raphaelkoszalka

#5 Cajado

Cajado

    Turista

  • Usuários
  • 58 posts
  • Sexo:Não informado

Posted 09/04/2013, 23:50

Basta colocar uma classe diferente em cada tag <a>

<ul>
<li><a href="#" class="menuproducts">item</a></li>
<li><a href="#" class="menucompany">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>

ul{list-style:none;padding:0px;margin:0px;height:186px;}
ul li{display:inline-block;}

li a{
        display:block;
        width: 81px;
        height: 168px;
        text-decoration: none;
        background-repeat:no-repeat;
        background-color:transparent;
        background-position:0px 0px;
}
li a:hover {  
        background-position: -81px 0;
}

li a.menuproducts{
        background-image: url("imagens/imgmenu/menu_products.png");
}

li a.menucompany{
        background-image: url("imagens/imgmenu/menu_company.png");
}

:lol:




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq