Ir para conteúdo

Arquivado

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

Munorit

Menu Com Submenu

Por , em Desenvolvimento frontend

Recommended Posts

Munorit    0

Munorit
Postado

Galera estou fazendo um site , porem meu menu não esta dando certo, não sei o que esta acontecendo + quando eu passso o mouse no submenu ele simplesmente buga.

 

Aki estão imagens do Erro ↓

 

http://site.imagemhost.net/image/VDA

 

http://site.imagemhost.net/image/Vtn

 

 

 

Código Fonte

<body>

<div id="nav">

<nav>
    
     <ul>
         <li><a href="#">Início</a></li>
         <li><a href="#">Recentes</a></li>
         <li><a href="#">Android</a></li>
         <li><a href="#">WindowsPhone</a></li>
         <li><a href="#">iOS</a></li>
         <li><a href="#">GameWorld</a></li>
         <li><a href="#">Windows</a></li>
         <li><a href="#">Mais</a>
 
             <ul>
                 <li><a href="#">Microsoft</a></li>
                 <li><a href="#">Apple</a></li>
                 <li><a href="#">Sansung</a></li>
                 <li><a href="#">Motorola</a></li>
                 <li><a href="#">Lenovo</a></li>
                 <li><a href="#">Nokia</a></li>
                 <li><a href="#">LG</a></li>
                 <li><a href="#">Asus</a></li>
                 <li><a href="#">Google</a></li>
                 <li><a href="#">Sony</a></li>
            </ul>       
    
    </li>
    
    </ul>
             
              

</nav>

</body>

Código css

body{
	background:#000;
}

#nav{
	float:inherit;
	width:998px;
	height:44px;
	background:url(img/fundo.png) center;
	margin:70px auto;
}

#nav ul{
	width:950px;
	height:46px;
	margin:0 auto;
	position:relative;
	
}

#nav ul li{
	float:left;
	display:block;
	position:relative;
}

#nav ul li a{
	float:left;
	font-family:"Century Gothic",arial;
	color:#fff;
	font-size:18,75px;
	text-decoration:none;
	padding:11px 26px;
}

#nav li ul{
	display:none;
}

#nav ul li a:hover{
	background:url(img/Menu_hover.png) repeat-x;
	color:#000;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s;
}

#nav li:hover ul{
	display:block;
	position:relative;	
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s;
}

#nav li:hover li{
	float:none;
	font-size:12px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

deadpool25    0

deadpool25
Postado

Cara entrei agora na programação i tau vês eu esteja erado mas esta faltando uma te-g ui de fechamento nos <li> e no <lu> acho que o modo coreto de escrever esse código seria

<body>

 

<div id="nav">

 

<nav>

 

<ul>

<li><a href="#">Início</a></li>

<li><a href="#">Recentes</a></li>

<li><a href="#">Android</a></li>

<li><a href="#">WindowsPhone</a></li>

<li><a href="#">iOS</a></li>

<li><a href="#">GameWorld</a></li>

<li><a href="#">Windows</a></li>

<li><a href="#">Mais</a></li> <- /*o ero estaria a qui voce esqueceu eça te-ge de fechamento*/

</ul> <- /*e esa aqui*/

<ul>

<li><a href="#">Microsoft</a></li>

<li><a href="#">Apple</a></li>

<li><a href="#">Sansung</a></li>

<li><a href="#">Motorola</a></li>

<li><a href="#">Lenovo</a></li>

<li><a href="#">Nokia</a></li>

<li><a href="#">LG</a></li>

<li><a href="#">Asus</a></li>

<li><a href="#">Google</a></li>

<li><a href="#">Sony</a></li>

</ul>

 

</li>

 

</ul>

 

 

 

</nav>

 

</body>

 

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