1

Boa noite galera, estou com um problema com meu menu..

Eu quero espaçar ele mas ai quando uso o padding ele cria uma área em volta que ao passar o mouse perto ele ja aciona o hover e eu gostaria de acioná-lo apenas quando passar o mouse em cima do texto..

Ai como não consegui isso usei o Display block e adicionei uma cor diferente para dar um contraste mas o bloco nao esta ficando na posição inicial e esta descendo do menu conforme aumentado a sua caixa..

Se alguém conseguir ou tirar esse espaçamento para o hover funcionar apenas no texto ou conseguir fazer a caixa ficar centrada eu agradeço :)

[OBS: Estou usando o Dreamweaver // Sou iniciante em Html/CSS e estudo pela net.. desculpa se o código tiver falhas ou tiver linhas desnecessárias :v]

inserir a descrição da imagem aqui

CSS

@charset "utf-8";
/* CSS Document */

body {
    font-size:16px;
    color:#000;
}

ul {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow: hidden;
}

ul li {
    display:inline
}

li a {
    display:inline-block;
  padding:20px 70px;
  text-decoration: none;
  color:#000;
}

li a:hover{
    color:#fff;
    background-color:#FC1F56;

}

li {
    float:left;
}

.active {
    color:#FFF;
}



#textura {
    position: absolute;
    width: 100%;
    height: 100%;
    margin:auto;
    z-index:1;
    left:center;
    background-repeat:repeat-x;
}

.principal_home {
    left: 225px;
    position: absolute;
    width:940px;
    height: 100%;
    background-color:#fff;
    z-index:1;
}



.top {
    position: absolute;
    left: center;
    width:940px ;
    height:70px ;
    background-color: #fff;
    z-index: 2;
}

.logo{
    position: absolute;
    left:12px;
    z-index:2;
}

.menu_home {
    position: absolute;
    left: 100px;
    top: 20px;
    z-index:2;
}

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>Untitled Document</title>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Background -->
<img id=textura src="imagens/textura_dofundo.jpg" />
<!-- Fim BG -->
<!-- Div Principal -->
<div class=principal_home>
<!-- Topo -->
<div class="top">
<img src="imagens/menu2.jpg">
</div>
<!-- Fim Topo -->
<!-- Logo -->
<div class="logo">
<img src="imagens/logo_1.png"/>
</div>
<!-- Fim Logo -->
<!-- Menu Home -->
<div class="menu_home">
<ul>
<li><a class=active href="home.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="novidades.html">Novidades</a></li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
</ul>
</div>
<!-- Fim Menu Home -->











</div>
<!-- Fim Div Principal -->
</body>
</html>

1 Resposta 1

0

Troque o top: 20px por top: 6px; do .menu_home que o menu ficará centralizado verticalmente:

Veja exemplo:

body {
    font-size:16px;
    color:#000;
}

ul {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow: hidden;
}

ul li {
    display:inline
}

li a {
    display:inline-block;
  padding:20px 70px;
  text-decoration: none;
  color:#000;
}

li a:hover{
    color:#fff;
    background-color:#FC1F56;

}

li {
    float:left;
}

.active {
    color:#FFF;
}



#textura {
    position: absolute;
    width: 100%;
    height: 100%;
    margin:auto;
    z-index:1;
    left:center;
    background-repeat:repeat-x;
}

.principal_home {
    left: 225px;
    position: absolute;
    width:940px;
    height: 100%;
    background-color:#fff;
    z-index:1;
}



.top {
    position: absolute;
    left: center;
    width:940px ;
    height:70px ;
    background-color: blue;
    z-index: 2;
}

.logo{
    position: absolute;
    left:12px;
    z-index:2;
}

.menu_home {
    position: absolute;
    left: 100px;
    top: 6px;
    z-index:2;
}
<!-- Background -->
<img id=textura src="" />
<!-- Fim BG -->
<!-- Div Principal -->
<div class=principal_home>
<!-- Topo -->
<div class="top">
<img src="imagens/menu2.jpg">
</div>
<!-- Fim Topo -->
<!-- Logo -->
<div class="logo">
<img src="imagens/logo_1.png"/>
</div>
<!-- Fim Logo -->
<!-- Menu Home -->
<div class="menu_home">
<ul>
<li><a class=active href="home.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="novidades.html">Novidades</a></li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
</ul>
</div>
<!-- Fim Menu Home -->











</div>
<!-- Fim Div Principal -->

1
  • Obrigado! Funcionou certinho :D
    – Pernandes
    Commented 31/01/2018 às 12:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .