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 Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
    • By soaresra
      Olá colegas, eu venho avançando a cada dia na programação em PHP mas eu travei em uma estrutura e queria a ajuda dos colegas mais experientes.
       
      Eu tenho 3 tabelas:
      Adm_Funcionarios_Usuarios - contem login e senha
      # login,  senha
          jose,  1234
       
      Sis_Setores: aonde tem os nomes dos módulos e os links dele. Ex. Administrativo, Financeiro, etc.
      # linkNome          link
      administrativo     administrativo.php
      financeiro             financeiro.php
      vendas                  vendas.php
       
      Adm_Funcionarios_Usuarios_Acessos - contem login e módulos
      # login,  autorizados
           jose,  administrativo, financeiro
       
      Hoje eu só uso o menu carregando todas as opções
      $sql = "SELECT * FROM Sis_Setores WHERE linkNome = '$Sistema' AND situacao = 1;"; $return = mysqli_query($conexao, $sql) or trigger_error(" Query falhou! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR); while($LinhaMenu = mysqli_fetch_assoc($return)) { echo '<a href="'.$LinhaMenu["link"].'" target="_self">'.$LinhaMenu["linkNome"]."</a>"; } O que eu estou tentando fazer é: (levando em consideração que eu já tenha as informações do usuário logado)
       
      1 - Verifica quem é a pessoa logada / Já tenho isso pronto
      2 - Verifica se a pessoa logada existe na tabela Adm_Funcionarios_Usuarios_Acessos no campo login / Já tenho isso pronto
       
      Não estou conseguindo fazer
       
      3 - Verifica na tabela Adm_Funcionarios_Usuarios_Acessos o campo autorizados os módulos que serão carregados
      4 - Percorre a array com os valores, exemplo: administrativo, vendas
      5 - Se existe na array a palavra administrativo que também existe no campo linkNome da tabela Sis_Setores
      6 - Carrega no menu apenas os links que existem dentro da array.
       
      O que eu tentei fazer sem sucesso (coisas de café com leite):
       
      $sql = "SELECT autorizados FROM Adm_Funcionarios_Usuarios_Acessos WHERE iduser = 1;"; $return = mysqli_query($conexao, $sql) or die(mysqli_error($conexao)); if(!$result = mysqli_fetch_array($return)) { echo "Deu Ruim no SQL dos Acessos"; } else { $autorizados = $result["autorizados"]; //echo $autorizados; foreach($autorizados as $valor) { $sql = "SELECT * FROM Sis_Setores WHERE linkNome = '$autorizados' AND situacao = 1;"; $return = mysqli_query($conexao, $sql) or trigger_error(" Query falhou! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR); while($LinhaMenu = mysqli_fetch_assoc($LinksSubSistema)) { echo '<a href="'.$LinhaMenu["link"].'" target="_self">'.$LinhaMenu["linkNome"]."</a>".$br; } } } O erro que dá é 
      Warning: Invalid argument supplied for foreach() in testeArray.php on line 50 //Linha 50 -> foreach($autorizados as $valor)
       
      Agradeço desde já aos colegas.
       
       
       
       
       
       
       
    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By lukaizh
      Olá Galera,
       
      Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css 
      eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
       
      e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
×

Important Information

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