CODEWITHSUNDEEP
htmlcss
Rummy03
Rummy03

Reputation: 31

Navbar Background Color on Hover

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:

img

And on the dropdown it looks like this:

img

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>

Upvotes: 0

Views: 2453

Answers (4)

Shahil Mishra
Shahil Mishra

Reputation: 498

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>

Upvotes: 1

Praveen
Praveen

Reputation: 1005

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>

Upvotes: 1

user18026404
user18026404

Reputation:

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="#">&#9776;</a>
    <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="social">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
       </div>
    </nav>
</body>

</html>

Upvotes: 0

CodErdal
CodErdal

Reputation: 465

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

Upvotes: 1

Related Questions