My `<li>` sizes are different on different pages - html

Question

On my home page the dropdown ul looks exactly how I want it to:
But on all my other pages the ul looks much bigger like this:
Here is the HTML for the home page:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li>News</li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the HTML for the other page:
<header id="header">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS for both:
#header {
background-color: #fff;
border-bottom: solid 1px rgba(144, 144, 144, 0.25);
box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
color: #000;
cursor: default;
font-size: 1.25em;
height: 4.5em;
left: 0;
line-height: 4.4em;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
z-index: 10001;
}
#header a {
color: #000;
}
#header h1 {
color: #000;
font-weight: 400;
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 0;
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 0;
padding-right: 50px;
display: block;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
#header nav ul li .button {
border-color: rgba(144, 144, 144, 0.25);
box-shadow: none;
height: 3em;
line-height: 2.9em;
margin-bottom: 0;
padding: 0 1.5em;
position: relative;
top: -0.075em;
vertical-align: middle;
}
#header .container {
position: relative;
}
#header .container h1 {
left: 0;
}
#header .container nav {
right: 0;
}
#header.alt {
background-color: transparent;
border: 0;
box-shadow: none;
height: 3.25em;
line-height: 3.25em;
position: absolute;
}
#header.alt h1 {
color: #ffffff;
left: 2.5em;
top: 2em;
}
#header.alt h1 a {
color: #FFF;
}
#header.alt nav {
right: 2em;
top: 2em;
}
#header.alt nav a {
color: #ddd;
}
#header.alt nav a:active, #header.alt nav a:hover {
color: #FFF;
}
#header.alt .button {
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff !important;
}
#media screen and (max-width: 980px) {
#header {
display: none;
}
}
I would like the other page's <ul> elements to be the same size as the home page but I can't seem to find any extra margins or padding on them.

Answer 1

It is because of the alt class. The ul li ul li gets a line-height from the alt class.
So force the same line-height upon the #header nav ul li ul li by adding the same line-height. Which is line-height: 3.25em;.

Answer 2

The issue is down to your line heights - they are set on #header and #header.alt to different values:
#header.alt:
line-height: 3.25em;
#header:
line-height:4.4em;
This is causing the difference you are seeing in your nav links.