Ir para conteúdo

POWERED BY:

Arquivado

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

Sancho_Pança

Menu e Submenu diferentes

Por , em Desenvolvimento frontend

Recommended Posts

Sancho_Pança    0

Sancho_Pança
Postado

Fala galera sou novo por aqui (estou na conta de um amigo pois não consigo criar tópicos na conta que acabei de criar), e gostaria de tirar uma dúvida, agradeço desde já.

 

Quero fugir do padrão ao criar menus e submenus, desta forma gostaria que o background das li do menu fossem diferentes do submenu, além de disso, queria que a imagem inserida no :hover do menu fosse diferente da imagem inserida no :hover do submenu

 

Fiz da seguinte maneira, mas nem tudo que eu queria deu certo. O que não ta dando certo seria o codigo:

.submenu:hover{

	background:url(images/submenu-ativo.png);}

 

Que puder me ajudar, eu agradeço.

 

HTML

<body>

<div id="background">
</div>

<div id="menu">
	<ul>
    
    	<li><a href="index.html">HOME</a></li>
        <li><a href="#">SOBRE</a></li>
        <li><a href="#">PORTOFÓLIO</a></li>
        <li><a href="#">SERVIÇOS</a>
        	<ul>
        		<li class="submenu"><a href="#"><span>Design Gráfico</span></a></li>
        		<li class="submenu"><a href="#"><span>Web Design</span></a></li>
        		<li class="submenu"><a href="#"><span>Ilustrações</span></a></li>
        	</ul>
        </li>
        
        <li><a href="#">ORÇAMENTO</a></li>
       
    
    </ul>

</div>

 

 

 

CSS

#menu {
	position:absolute; top:49px; right:63px;
	float: left;
	line-height:45px;
	z-index:2;
	
}
#menu ul li {
	display: block;
	float: left;
	text-align:center;

}
#menu ul li a{
	font-family:Myriad Pro;
	color:#000;
	display: block;
	width:86px;
	height:48px;
	list-style:none;
	font-size:13px;
	text-decoration: none;
	text-transform:none;
	text-align:center;
}
#menu ul li:hover{
	background:url(images/menu-ativo.png) no-repeat center;
	width:86px;
	height:48px;
}

#menu ul li a:hover{
	color:#00F;

}

#menu ul li ul li{
	display:none;
	
	
}

#menu ul li:hover ul li{
	display:list-item;
	margin:0px;
	padding:0px;

}


.submenu{
	background:url(images/texte.jpg);
	list-style:none;
}

.submenu span{
	font-size:11px;
}

.submenu:hover{
	background:url(images/submenu-ativo.png);
}

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hatsuya    0

Hatsuya
Postado 
#menu {
	position:absolute; top:49px; right:63px;
	float: left;
	line-height:45px;
	z-index:2;
	
}
#menu ul li {
	display: block;
	float: left;
	text-align:center;
 
}

#menu ul li:hover{
	background:url("inicio.jpg") no-repeat center;  /* Formatação do menu */
	width:86px;
	height:48px;}
	
#menu ul li a{
	font-family:Myriad Pro;
	color:#000;
	display: block;
	width:86px;
	height:48px;
	list-style:none;
	font-size:13px;
	text-decoration: none;
	text-transform:none;
	text-align:center;
}

}
 
#menu ul li a:hover{
	color:#00F;
 
}
 
#menu li ul{
	display:none;
}

#menu li:hover ul  {
	display:list-item;
	margin:0px;
	padding:0px;
}
 
#menu li ul a:hover { background: url("hd.png");} /* Formatação do link do sub menu*/

 

Não sei se é isso que você quer, mas exclui as classes, coloquei aspas nos "background: Url("");"

 

altere as urls do background para ver se a formatação que você quer é essa. Se falta algo me avisa.

 

Fiz isso tarde da noite cara, e seu código para mim, ta meio bagunçado, então tenta entender aê.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hatsuya    0

Hatsuya
Postado

A base é essa, só ir testando que você descobre como funciona :D. Por nada mano, estamos aí para ajudar!

 

 

--Hatsuya

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito