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 AlexandrePrezzi
      Preciso de uma ajuda....
       
      Tenho um código que gera um botao  dropdown e dentro dele gera um segundo nivel....
       
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece 
       
      Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)

      Mas supondo que eu clique em "Primeiro"  (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
      e isso acaba deixando empilhado..
       
      Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche)  e vice-versa.
       
      Na imagem coloquei o q esta acontecendo.....

    • By Sapinn
      Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade 
       
      codigo do menu que fica a esquerda 
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu vertical reponsivo com html e css</title>
          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
          <style>
             *{
          margin:0;
          padding:0;
      }
      .menuMobileVertical a{
          text-decoration:none;
          color:white;
          display:block;
          padding:20px 5px;
      }
      .menuMobileVertical a:hover{
          background:rgba(176,224,230);
          color:black;
      }
      body{
          font-family:arial;
      }
      input[type="checkbox"]:checked ~ nav{
          transform: translateX(350px);
      }
      .menuMobileVertical ul{
          list-style:none;
          position:absolute;
          top:70px;
          width:100%;
          
      }
      .icone-menu{
          font-size:40px;
      }
      input[type="checkbox"]{
          display:none;
      }
      .menuMobileVertical{
          background:rgba(16,16,16,.5);
          width: 350px;
          height: 100vh;
          left:-350px;
          position: absolute;
          transition:all 0.5s;
          
      }
      label{
          padding:15px;
          position:absolute;
          z-index:1;
      }

          </style>
      </head>
      <body>
          <div class="menuMobile">
              <input type="checkbox" id="check">
              <label for="check"><i class="bi bi-list icone-menu"></i></label>
              <nav class="menuMobileVertical">
                  <ul>
                      <li><a href="">HOME</a></li>
                      <li><a href="">LOGIN</a></li>
                      <li><a href="">ALUNO</a></li>
                      <li><a href="">PROFESSOR</a></li>
                      <li><a href="">CONTATO</a></li>
          </ul>
          </nav>
      </div>
      </body>
      </html>
    • By Sapinn
      Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.
      Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
      Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu
      ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
    • By Sapinn
      Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.
      Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
      Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu
      ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
    • By Sapinn
      Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso???
×

Important Information

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