Só abrir menu quando passar mouse sob aba

[Marcos Coelho2 2]

Olá pessoal do imaster.

Da uma entrada no link para entender meu problema: http://pacoesportes.com/luva-everlast-preta.jsp

 

No topo na aba "Comprar por categorias" passe o mouse um pouco abaixo dessa aba, veja que abre o menu sem passar o mouse em cima da aba.

 

O que eu quero é que esse menu só abra quando eu passar o mouse em cima da aba e nao abra se passar abaixo da aba como está acontecendo.

[Ivan Diniz 0]

você colocou no css visibility: hidden; aconselho usar display: none;.

 

Terá que modificar no javascript que quando passar o mouse ele fique com display: block.

[Marcos Coelho2 2]

melhorou bastante!

mas ainda se você passar proximo da aba sem passar na aba esta abrindo.

eu terei que deixar so na aba pq terei um submenu superior passando embaixo da aba.

[Pedro Filipe Cerqueira 0]

Olá se não me engano você quer um menu dropdown?

acabei de fazer um simples usando css e js:

 

HTML:

 

<ul id="nav">
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Sobre Nós</a></li>
   <li><a href="#">Serviços</a>
       <ul id="submenu" class="submenu">
           <li><a href="#">Instalação de Janelas</a></li>
           <li><a href="#">Instalação de Portas</a></li>
           <li><a href="#">Instalação de Forro PVC</a></li>
       </ul>
   </li>
   <li><a href="#">Novidades</a></li>
   <li><a href="#">Contato</a></li>
   <li><a href="#">Orçamento</a></li>
   <li><a href="#">Nossos Produtos</a></li>
</ul>

 

CSS:

#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
position:relative;
float:left;
}
#nav li a {
position:relative;
float:left;
width:142px;
height:40px;
padding:0;
margin:0;
line-height:40px;
text-align:center;
text-decoration:none;
text-decoration:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
#nav li a:hover {
background-image:url(img/bg_btn.jpg);
background-position:0px 40px;
}
#nav li ul {
position:absolute;
float:left;
width:240px;
list-style:none;
padding:0;
margin-top:40px;
background-color:#993300;
border-left:#000 1px solid;
border-right:#000 1px solid;
display:none;
}
#nav li ul li {
position:relative;
float:left;
}
#nav li ul li a {
position:relative;
float:left;
width:230px;
text-align:left;
padding-left:10px;
border-bottom:#000000 1px solid;
}
#nav li ul li a:hover {
background-image:url(img/bg_btn.jpg);
background-position:0px 0px;
}

 

JavaScript:

function dropdown(){
var menu = document.getElementById('nav').getElementsByTagName('li');
for(i=0; i < menu.length; i++){
	if(menu.item(i).getElementsByTagName('ul').length > 0){

		menu.item(i).onmouseover = function(){
			this.style.background = 'url(img/bg_btn.jpg)';
            this.style.backgroundPosition = '0px 40px';
			this.getElementsByTagName('ul').item(0).style.display = 'block';
		}

		menu.item(i).onmouseout = function(){
			this.style.background = 'url(img/bg_btn.jpg)';
            this.style.backgroundPosition = '0px 0px';
			this.getElementsByTagName('ul').item(0).style.display = 'none';	
		}

	}
}
}

 

Espero ter te ajudado!

Abraços.