CSS - Help with hover in the menu

Question

CSS - Help with hover in the menu

Navigation

#1 by (0 votes)

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 only when hovering over the text ..

I did not use this as a display block and I added a different color to give a contrast but the block is not in the initial position and is descending from the menu as your box is enlarged.

If someone can get this spacing so the hover works only in the text or can get the box centered, I appreciate it :)

[Note: I am using Dreamweaver // I am a beginner in Html / CSS and I study the net .. sorry if the code has flaws 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>

css menu hover

asked by anonymous 31.01.2018 / 01:30

1 answer

Check if current time is in the defined radius in the database Why are native methods like navigator.onLine of network verification not working correctly?

score 0 · Accepted Answer

Change top: 20px to 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 -->