Jump to content
aslivs

Tirar "margem" do menu dropdown

Recommended Posts

Oi pessoal. Estou criando um menu e estou com certa dificuldade. Nos itens que "vão para baixo" há um espaço em branco na esquerda que não consigo tirar de jeito nenhum, como vocês podem ver na imagem. Meus códigos HTML e CSS estão logo abaixo. Se puderem me ajudar, agradeceria muito :)

 

<body>
	<div id="banner"> </div> 
	<div id="menu">
			<nav>
	<ul class="menu">
        <li><a href="#">Index</a>
		</li>
        <li><a href="#">A Série</a>
		</li>
		<li><a href="#">Personagens</a>
				<ul>
					<li><a href="#">Ted Mosby</a></li>
					<li><a href="#">Robin Scherbatsky</a></li>
					<li><a href="#">Barney Stinson</a></li>           
					<li><a href="#">Marshall Eriksen</a></li> 
					<li><a href="#">Lily Aldrin</a></li> 					
				</ul>
			</li>
		<li><a href="#">Episódios Especiais</a>
		</li>
		<li><a href="#">Entre em contato</a>
		</li>
</div> 

 

.menu{
	list-style:none;
}

.menu li{
	position:relative;
	float:left;
}

.menu li a{
	color:black;
	text-decoration:none;
	padding:10px 85px;
	display:block;
}
	
.menu li a:hover{
	background:#4C7EA5; 
	color:#fff; 
	text-shadow:0px 0px 5px #fff; 
}

.menu li  ul{
	position:absolute; 
	top:100%; 
	left:0;
	background-color:#fff; 
	display:none;
}

.menu li:hover ul, .menu li.over ul{
	display:block;
}

.menu li ul li{
	display:block;
	width:100%;
}

 

Capturar.PNG

Share this post


Link to post
Share on other sites

com esse codigo incopleto fica dificil tem online??

 

tem gambiaras tipo. adiciona 

margin-left: -30px; em #menu

 

  • Obrigado! 1

Share this post


Link to post
Share on other sites
1 hora atrás, Maujor disse:

@aslivs

 

Acrescente a seguinte declaração CSS:


.menu li ul {
  padding: 0; 
  ...
}

 

realmente agora que fui ver onde era me confundir,pra nao muda muito o code simples



.menu li ul {
padding-left:0;
}

 

  • Obrigado! 1
  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By opl12
      Podem me ajudar?
      Preciso colocar um menu "DropDown" na "Nav Bar"... mas tô me quebrando hahahaha
      o que estou fazendo de errado?
      <!DOCTYPE html> <html lang="pt-br"> <head> <!-- Última versão CSS compilada e minificada --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Tema opcional --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Última versão JavaScript compilada e minificada --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>::: TESTE :::</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <!--<img width="80px" height="30" src="#" title="seu texto" vspace="10px"/>--> </div> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li> <li class="nav-link"><a href="#">LINK C</a></li> <li><a href="#">LINK D</a></li> <li><a href="#">LINK E</a></li> <li><a href="#">LINK F</a></li> <li><a href="#" target="a_blank">LINK G</a></li> <div class="dropdown"> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> User</a></li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li> </ul> </div> </nav> </body> </html>  
    • By neoandrevictor
      Bom dia,
       
      Como faço para gerar um arquivo .doc (Microsoft Word) através de javascript com margens customizadas? Sei que para gerar o css corretamente tenho que gerar inline mas não consigo definir a margem de jeito algum.
       
      Poderiam me ajudar por gentileza?
    • By jcvlanova
      Galera, gostaria de saber se e possivel colocar no NavBar do Boostrap o icone do menu tipo sanduiche, de tal forma que o menu vertical ou horizontal somente fosse mostrado quando clicado no icone sem necessariamente expandir o height do Navbar? Desculpem a ignorancia. Mas os exemplos que vi são sempre usando a função collapse da class navbar collapse. Isso faz com que o menu (horizontal ou vertical), esteja sempre visivel e o botao só apareça quando voce diminui o tamanho da tela, que é quando o menu fica oculto. Quando isso acontece, o NavBar é expandido. Não é isso que quero. Quero o Navbar com altura fixa de 140 px sempre, com o botao tipo sanduiche a esquerda meu logo no centro e um campo de busca a direita. Ao clicar no botão os menus seriam mostrados normalmente. Consigo fazer isso com o css, sem usar o Bootstrap, mas nao é isso que quero. Alguem pode me ajudar ?
      Meu código está assim :
      <div class="navbar navbar-secondary navbar-dark"> <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> <a href="#" class="navbar-brand"><img src="/imagens/LogoJornal.png"> Aqui entra os itens de menu: <div id="menu class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="Home"> </li> <li class="nav-item active"> <a class="nav-link" href="Principal"> </li> ... </ul> <form class="form-inline"> <input type="''text" placeholder="Buscar" name="buscar" class="form-control"> <input type="submite" class="btn btn-outline"> </button>  
    • By Carlos Web Soluções Web
      Bom dia !!
       
      No site do link a seguir, quando eu reduzo o tamanho do site em:

      @media screen and (max-width: 900px)

      Entre a "Imagem 1" e a "tabela de baixo" existe um espaço !! Não estou conseguindo retirar este espaço !!

      LINK

      Por favor me ajudem
      Obrigado
       
    • By gabybarross
      Amigos, preciso da ajuda de vocês. 
      Meu site vende um serviço e gostaria de saber como faço após a compra desse serviço que seja automaticamente incluído um perfil para o usuário. Isso porque gostaria de fazer um menu em que apenas quem comprou o serviço consiga visualiza-lo. 
      OBrigada gabriela
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.