drop down menu em divs com imagens de fundo.

[koszalka 0]

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.

[Edson Carli 0]

Curiosidade: tem algum motivo para usar divs no menu em vez de uma lista? :mellow:

[ricardo_mc 19]

Nunca crie menus com DIV, usar os List Itens é bem melhor.

 

Se quiser, tenho um script montado por mim de menu (vertical e horizontal) apenas em CSS e usando imagens de fundo.

 

Dá uma olhada:

http://unlock.com.br/projeto_css/

 

A única parte que possui jQuery é para abrir a caixa de login no último item do primeiro menu, mas o funcionamento em si do menu é puramente CSS.

 

As 3 barras possuem a mesma estrutura, a única coisa que muda é o tema do CSS.

 

Se quiser baixar o projeto, o link é:

http://unlock.com.br/projeto_css/menuDropDown-Best.zip

 

Espero que ajude