Navbar Background Color on Hover - html

Question

I have a navbar with a dropdown menu which works perfectly, but to show what is selected I want to make the background change on hover.
But when I try to do this it doesn't fit it looks like this:
And on the dropdown it looks like this:
And I want the background to fit with the navbar, but I don't know how.
nav {
width: 100%;
height: 60px;
background-color: gray;}
nav ul {
float: left;}
nav ul li {
float: left;
list-style: none;
position: relative;}
nav ul li a {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;}
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 60px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 0;}
/*top right bottom left*/
nav ul li ul li a:hover {
padding: 10px 10px 10px 10px;
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>

Answer 1

I think this is your requirement.
No need of any taking -margin instead that make ul padding-left to zero and for hover background add padding to <a> tag.
nav {
width: 100%;
background-color: gray;}
nav ul {
float: left;
font-size: 0;
padding: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
background: gray;
}
nav ul li a {
margin-left: 0;
padding:15px 20px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 0;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 15px 20px;}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>

Answer 2

there are many points you need to understand Like where to use float, negative margins and should not copy same code on hover state, I removed some of those and added some basic style and your navbar is good to go. you can also check this codepen link https://codepen.io/shahilparichay/pen/OJOJMpj
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: gray;
}
nav ul {
/* float: left; */
}
nav ul li {
/* float: left; */
list-style: none;
position: relative;
display: inline-block;
}
nav ul li a {
margin-left: 0px;
padding: 15px 10px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
color: white;
background-color: lightblue;
}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 15px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 10px 10px 10px 10px;
}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;
}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>

Answer 3

You have to edit the padding values to set the background size on hover.
To change the background color to match the navbar when hovered in the category:
change this code:
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
to this:
nav ul li a:hover {
margin-left: -60px;
padding:16px;
margin-right: 10px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;
}
Blog about padding:
https://www.w3schools.com/css/css_padding.asp

Answer 4

I don't have time to trace your code, but you can use this code and make changes according to your need:
<!DOCTYPE html>
<html>
<head>
<title> Responsive Navigation Menus with Social Media</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () {
$(".toggle-nav").click(function () {
$(".menu ul li").slideToggle("slow");
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: arial;
}
.menu {
width: 100%;
background: #333;
overflow: auto;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 70px;
}
.menu ul li {
float: left;
}
.menu ul li a {
text-decoration: none;
width: 100px;
display: block;
text-align: center;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.menu ul li a:hover {
background: #6666ff;
}
.menu ul li a.active {
background: orange;
}
.toggle-nav {
color: #fff;
text-decoration: none;
display: none;
}
.social {
float: right;
margin-right: 100px;
line-height: 70px;
}
.social a {
max-width: 50px;
text-align: center;
}
.social a i {
font-size: 20px;
background: #fff;
width: 40px;
height: 40px;
line-height: 40px;
color: #000;
border-radius: 50%;
margin: 5px;
}
.social a i:hover {
background: #6666ff;
color: #fff;
}
#media(max-width:800px) {
.toggle-nav {
font-size: 40px;
text-align: center;
font-weight: bold;
padding: 10px 0px 10px 0px;
background: #6666ff;
width: 100%;
display: block;
}
.menu ul li a {
width: 100%;
}
.menu ul li {
float: none;
width: 100%;
display: none;
;
}
.social {
width: 100%;
text-align: center;
border-top: 1px solid #fff;
float: none;
}
}
#media(min-width:850px) {
.menu ul li {
display: block !important;
}
}
</style>
</head>
<body>
<nav class="menu">
<a class="toggle-nav" href="#">☰</a>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Privacy</li>
<li>Contact</li>
</ul>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</nav>
</body>
</html>