Ir para conteúdo

POWERED BY:

Arquivado

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

Diego Pancera Dos Santos

HTML/CSS Dropdown com erro.

Por , em Desenvolvimento frontend

Recommended Posts

Diego Pancera Dos Santos    0

Diego Pancera Dos Santos
Postado

Boa Tarde, estou com um problema com um Menu Dropdown, o problema deve ser no CSS.

O que acontece é quando eu vou selecionar algum link do Dropdown, os links do Drop ficam desalinhados e o background fica esquisito.

 

Se alguém puder me ajudar ficaria grato.

Código Abaixo

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link rel="stylesheet" type="text/css"  href="teste.css"/>
</head>
<body>
<div id="menujohanes"> 
<ul> 
<li><a href="#" title='Home'>Home</a></li> 
<li><a href="#">Download</a> 
<ul> 
<li><a href="#">Teste1</a> 
<ul>
<li><a href="#">Episode 1</a></li> 
<li><a href="#">Episode 2</a></li> 
<li><a href="#">Episode 3</a></li> 
</ul> 
</li>
<li><a href="#">Teste2</a> 
<ul>
<li><a href="#">Episode 1</a></li> 
<li><a href="#">Episode 2</a></li> 
<li><a href="#">Episode 3</a></li> 
</ul> 
</li> 
<li><a href="#">Teste3</a> 
<ul>
<li><a href="#">Episode 1</a></li> 
<li><a href="#">Episode 2</a></li> 
<li><a href="#">Episode 3</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">Teste5</a> 
<ul> 
<li><a href="#">Twitter</a></li> 
<li><a href="#">Facebook</a></li> 
<li><a href="#">Blogger</a></li> 
<li><a href="#">Google plus</a></li> 
</ul> 
</li> 
<li><a href="#">Multi sub</a>
<ul>
<li><a href="#">Episode 1</a>
<ul> 
<li><a href="#">Episode 2</a>
<ul>
<li><a href="#">Episode 3</a></li>
<li><a href="#">Episode 4</a></li>
</ul> 
</li> 
<li><a href="#">Episode 5</a></li> 
</ul>
</li>
<li><a href="#">Episode 6</a></li> 
<li><a href="#">Episode 7</a></li> 
</ul> 
</li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Email</a></li> 
</ul></div>
</body>
</html>

 

CSS:

 

#menujohanes{
width: 100%;
margin: auto; 
background: #3a4652; 
height: 49px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 0px solid #000;
text-transform: uppercase; 
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index:99;} 

#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px; 
margin: auto;} 

#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;} 

#menujohanes ul li:hover{
background:#D55A00; 
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);} 

#menujohanes ul li a:hover {
color:#3a4652;} 

#menujohanes ul li a{
color: #999; 
padding: 0 10px; 
line-height:25px; 
font-size:12px; 
display:block; 
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);} 
#menujohanes ul li ul li{float:none; position:relative;} 

#menujohanes ul li a:hover{
	color: #fff;}
	

#menujohanes ul li ul{
position:absolute; 
top:49px;
left:0; 
display:none; 
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2); 
width:160px;
border-radius: 1px 10px 10px 10px;
background: #fff;} 

#menujohanes ul li:hover > ul{display: block;} 

#menujohanes ul li ul li a{line-height:15px;} 

#menujohanes ul li ul li ul{
position: absolute; 
top:0; left:150px; 
display: none; 
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px; 
width:150px;
background: #fff;}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

M@rc    1

M@rc
Postado

Veja se ficou ok:

 

#menujohanes{
width: 100%;
margin: auto;
background: #3a4652;
height: 49px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 0px solid #000;
text-transform: uppercase;
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index:99;}
#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px;
margin: auto;}
#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
width: 100px; /* Adicionado*/
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li:hover{
background:#D55A00;
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
}
#menujohanes ul li a:hover {
color:#3a4652;
}
#menujohanes ul li a{
color: #999;
padding: 0 10px;
line-height:25px;
font-size:12px;
display:block;
text-decoration:none;
margin-left: 0px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}
#menujohanes ul li ul li{float:none; position:relative;}
#menujohanes ul li a:hover{
color: #fff;}
#menujohanes ul li ul{
position:absolute;
top:49px;
left:0;
display:none;
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
width: 85px; /* Adicionado*/
border-radius: 1px 10px 10px 10px;
background-color: red;
background: #fff;}
#menujohanes ul li ul li{ /* Adicionado*/
left: -40px; /* Adicionado*/
}
#menujohanes ul li:hover > ul {
display: block;
}
#menujohanes ul li ul li a{line-height:15px;
padding-right: 0px;
}
#menujohanes ul li ul li ul{
position: absolute;
top:0;
left: 72px; /* modificado*/
display: none;
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px;
width: 83px;
background: #fff;
margin-left: 52px; /* Adicionado*/
}

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