How to make a navigation menu item with symmetrical background - html

Question

I'm trying to get the background to each nav link fixed. I want it to be uniform behind each link, meaning equal on both left and right side.
Link to the actual webpage.
See the code below the picture.
Thanks.
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home
</li>
<li class="hvr-sweep-to-bottom">Fleet Management
<ul class="level_1">
<li>Basic
</li>
<li>Basic Plus
</li>
<li>Ultra
</li>
<li>Ultra Plus
</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency
</li>
<li class="hvr-sweep-to-bottom">Maintenance
</li>
<li class="hvr-sweep-to-bottom">Drivers
</li>
<li class="hvr-sweep-to-bottom">Contact
</li>
<div class="clearfix"></div>
</ul>
And the CSS
.top-nav {
float: right;
width: 80%;
position: absolute;
left: 27%;
top: 20%;
}
.top-nav ul {
padding: 0;
margin: 0;
}
.top-nav ul li {
display: inline-block;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active {
background: #bb1e10;
}
.top-nav ul li a {
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i {
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left: 0;
float: left;
position: relative;
}
.top-nav ul ul li {
float: none;
width: 200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display: block;
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #bb1e10;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover,
.hvr-sweep-to-bottom:focus,
.hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before,
.hvr-sweep-to-bottom:focus:before,
.hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/*---*/

Answer 1

You have added some JavaScript as well (for animations and swipe downs). I was able to mimic something, which doesn't have animations, but works as expected. Have a look here in the full screen:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
font-family: 'Segoe UI';
}
a {
text-decoration: none;
}
.nav {
display: block;
}
.nav > li {
display: inline-block;
position: relative;
}
.nav > li:hover,
.nav > li.active {
background-color: #f00;
color: #fff;
}
.nav a {
display: block;
padding: 10px;
color: inherit;
}
.nav ul {
display: none;
position: absolute;
left: 0;
right: 0;
background-color: #f00;
color: #fff;
}
.nav > li:hover ul {
display: block;
}
<ul class="nav">
<li class="hvr-sweep-to-bottom active">
Home
</li>
<li class="hvr-sweep-to-bottom">
Fleet Management
<ul>
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">
Broker Agency
</li>
<li class="hvr-sweep-to-bottom">
Maintenance
</li>
<li class="hvr-sweep-to-bottom">
Drivers
</li>
<li class="hvr-sweep-to-bottom">
Contact
</li>
</ul>
Update
To fix your issue, please add this to the bottom of the style.css:
.nav {
display: block;
margin: 25px;
float: left;
}
.nav > li {
display: inline-block;
position: relative;
}
.nav > li:hover,
.nav > li.active {
background-color: #f00;
color: #fff;
}
.nav a {
display: block;
padding: 10px;
color: #fff;
}
.nav ul {
display: none;
position: absolute;
left: 0;
right: 0;
background-color: #f00;
color: #fff;
z-index: 1;
}
.nav > li:hover ul {
display: block;
}
So this gives an output like this: