I have 4 pages on my website right now. I have a navigation bar on the Home page which works fine it is the way i want it. Other pages is the problem i have copied and pasted the same code over to the other pages but the menu looks bigger for some reason. Here are some pictures and the coding for the main page and others.
Home Page
All other pages basically.
/* Navigation menu */
ul {
list-style-type: none;
margin: 0px;
padding: 50px;
overflow: hidden;
background-color: black;
}
.active {
background-color: #04AA6D;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
position: relative;
width: auto;
font-size: 30px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: orange;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position: relative;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}<body>
<!-- Navigation menu links Starts -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Produtcs</a></li>
<li><a href="purchase.html">Purchase</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<!-- Navigation menu links Ends -->/* Navigation menu */
ul {
list-style-type: none;
margin: 0px;
padding: 50px;
overflow: hidden;
background-color: black;
}
.active {
background-color: #04AA6D;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
position: relative;
width: auto;
font-size: 30px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: orange;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position: relative;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
} <body>
<!-- Navigation menu links Starts -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Produtcs</a></li>
<li><a href="purchase.html">Purchase</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<!-- Navigation menu links Ends -->
<!-- Header Image is here -->
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Good Gums</h1>
</div>
</div>
<!-- Header Image ends here -->
</body>
</html>