Pandu A Pandu A - 5 months ago 22
CSS Question

CSS Navbar hover full height

So I am new in this HTML thing and I am experimenting with a navigation bar. With when I hover over a li/a element I get another color for the full height of the navigation bar.

This is what I get first



body{
margin: 0px;
padding: 0px;
}

.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
overflow: hidden;
}

.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}

.navbar ul li:hover{
background-color: #bdc3c7;
}







<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
</body>
</html>





And then I changed a few things in the code and came up with this (Here is the second experiment result) (erasing
overflow:hidden;
and changed it with
line-height:55px;
)

I got the full height hover but there's a white gap between the browser window and my navigation bar.



body{
margin: 0px;
padding: 0px;
}

.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}

.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}

.navbar ul li:hover{
background-color: #bdc3c7;
}





I know there's a bunch of similar questions like mine and I've read them before asking here, but I still don't get the result that I want.

Answer

ul was the issue in your code. You didn't define any value for that,

body{
    margin: 0px;
    padding: 0px;
}

.navbar{
  width:100%;
  height:80px;
  background:#fff;
}
.navbar ul{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
    .navbar ul li{
        list-style-type: none;
        display: inline-block;
        text-align: center;
    }
        .navbar ul li a{
            text-decoration: none;
            color: black;
            font-family: 'Franklin Gothic';
            padding: 50px;
        }
.navbar ul li:hover{
    background-color: #bdc3c7;
}