CSS-help with hover in the menu

Question

CSS-help with hover in the menu

Good night folks, I'm having a problem with my menu..

I want to space it but when I use padding it creates an area around that when hovering near it already triggers hover and I would like to trigger it only when hovering over the text..

How could not I used the display block and added a different color to give a contrast but the block is not staying in the starting position and is descending from the menu as increased to your box..

If anyone can get or take this spacing so hover works only in text or can get the box to be centered I appreciate:)

[note: I'm using Dreamweaver / / I'm a beginner in Html / CSS and study online.. sorry if the code is flawed or has unnecessary lines: v]

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

css menu hover

Author: Pernandes, 2018-01-31

Source

1 answers

score 0 · Accepted Answer

Change top: 20px to top: 6px; from .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 -->