4 replies to this topic

[vessco]

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.

[pyro3x]

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;
}

[Jessica-riberio]

Dê uma olhada nesse artigo e vê se te ajuda: Criando um menu dropdown com html e css

[vessco]

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'.

[Cajado]

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");
}