Navigation Bar Error

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
I am currently working on a personal website and I am having problems with the nav bar. This is a horizontal navbar. I in total have about 10 pages interlinked with each other. I use the program named Brackets. The problem is, on every other page other than the homepage, the navbar works fine. But on my home page, when you open the page in a browser, the navbar becomes smaller, the dropdown menu doesn’t work, and when I hover over the tabs, instead of becoming light black, it underlines the text in blue.

Note that to understand the problem, you need to be able to open my code in a browser. The information on the website will be replaced with random text for personal reasons. I will also only be placing 4 pages - 2 main .html pages and two .css pages supporting them.
<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
As mentioned before this is my personal project. WHen I go to my navbar on the home page, it behaves incorrectly compared to the other pages on my website. When I hover over the tabs, insted of turning light black, they under line the text in blue and the drop down doesn’t work.

``` Home Page: .html File this is the page with the problem Lorem ipsum dolor sit amet, consectetur adipisicing elit...
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

section {
background-color: antiquewhite;
padding: 16px;
margin: 16px;
display: block;

    }

footer {
background-color: white;
padding: 16px;
margin: 16px;
display: block;
}

Lunar Polar Great Heights

Top Cats and Dogs

Crates

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Planes

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

School

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

<footer>

   <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
    
</footer>

Home Page: .css file

html, body {
min-height: 100%;
display: flex;
flex-direction: column;
font-weight: 300;
line-height: 1.5;
}
header {
padding: 20px 0;
}

header .row,
footer .row {
display: flex;
align-items: center;
}
header nav {
display: flex;
justify-content: flex-end;
}

header p {
padding: 0 20px;
margin: 0;
}

body {
font-family: ‘Lato’, sans-serif;

background-position: center top;
background-size: cover;
margin: 0;
}

/* FOOTER NAVIGATION */

About Us Page: .html This is how the nav bar is supposed to look like

Lorem ipsum dolor sit amet, consectetur adipisicing elit...
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

section {
background-color: antiquewhite;
padding: 16px;
margin: 16px;
display: block;

    }

footer {
background-color: white;
padding: 16px;
margin: 16px;
display: block;
}

<section>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</section>


   <footer>

   <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
    
</footer>
About us page: .CSS file

html, body {
min-height: 100%;
display: flex;
flex-direction: column;
font-weight: 300;
line-height: 1.5;
}
header {
padding: 20px 0;
}

header .row,
footer .row {
display: flex;
align-items: center;
}
header nav {
display: flex;
justify-content: flex-end;
}

header p {
padding: 0 20px;
margin: 0;
}

body {
font-family: ‘Lato’, sans-serif;

background-position: center top;
background-size: cover;
margin: 0;
}

}
/* FOOTER NAVIGATION */

<do not remove the three backticks above>

I need the navbar on the HOME PAGE to look the same as the navbar on the about us page and I also need to Lessons drop down menu working. 
Thx for your time and Help
Regards
Satanshu

Try making the li inline instead of inline-block.

1 Like

Thx for the replies guys, I managed to retrace my steps to find the error … it not fixed but thx for your time…
Regards
Satanshu

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.