CSS - Help with Hover in the menu

Asked

Viewed 456 times

1

Good evening guys, I’m having a problem with my menu..

I want to space it but then when I use the padding it creates an area around that when passing the mouse near it already triggers the Hover and I would like to trigger it just when passing the mouse over the text..

Then I did not get it I used the Display block and added a different color to give a contrast but the block is not getting in the initial position and this descending from the menu as increased its box..

If someone can or can take this spacing for the Hover to work only on the text or can make the box stay centered I appreciate :)

[NOTE: I’m using Dreamweaver // I’m a beginner in Html/CSS and studying on the net.. I’m sorry if the code crashes or has unnecessary lines :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>
css menu hover

1 answer

0


Exchange the top: 20px for top: 6px; of .menu_home that the menu will be centered vertically:

See example:

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 -->

  • Thank you! It worked right :D

Browser other questions tagged css menu hover

You are not signed in. Login or sign up in order to post.