So currently I’m making a navbar as a new programmer and I got a problem there are little gaps under the when my cursor hover over it.
White gap under user
<body>
<header class="header">
<?php session_start(); ?>
<nav>
<ul>
<?php if (isset($_SESSION['status']) && $_SESSION['status'] == "login") { ?>
<li><a class="roboto-medium" href="#">STORE</a></li>
<li><a class="roboto-medium" href="#">CONTACT</a></li>
<li><a class="roboto-medium" href="#">HOME</a></li>
<?php } else { ?>
<li><a class="fa fa-user" href="#"></a></li>
<li><a class="roboto-medium" href="#">REGISTER</a></li>
<?php } ?>
</ul>
</nav>
</header>
</body>
nav {
height: 50px;
background-color: rgb(255, 255, 255);
justify-content: space-between;
align-self: center;
}
nav li {
float: right;
margin: 0;
}
nav > ul {
list-style-type: none;
display: block;
padding: 0px;
margin: 0px;
overflow: hidden;
}
nav > ul > li > a{
text-decoration: none;
color: rgb(0, 0, 0);
padding: 15px;
display: block;
text-align: center;
}
li a:hover {
text-decoration: none;
display: flex;
transition: .0s;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(255, 178, 54);
}
I’m expecting the hover background colour to fill up the height without any gap left.
New contributor
Ruby Calderon is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1