如何制作背景对称的导航菜单项

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"><a href="index.php">Home</a> </li> <li class="hvr-sweep-to-bottom"><a href="fleet.php">Fleet Management</a> <ul class="level_1"> <li><a href="#">Basic</a> </li> <li><a href="#">Basic Plus</a> </li> <li><a href="#">Ultra</a> </li> <li><a href="#">Ultra Plus</a> </li> </ul> </li> <li class="hvr-sweep-to-bottom"><a href="services.php">Broker Agency</a> </li> <li class="hvr-sweep-to-bottom"><a href="maintenance.php">Maintenance</a> </li> <li class="hvr-sweep-to-bottom"><a href="blog.php">Drivers</a> </li> <li class="hvr-sweep-to-bottom"><a href="mail.php">Contact</a> </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 ai { 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"> <a href="index.php">Home</a> </li> <li class="hvr-sweep-to-bottom"> <a href="fleet.php">Fleet Management</a> <ul> <li><a href="#">Basic</a></li> <li><a href="#">Basic Plus</a></li> <li><a href="#">Ultra</a></li> <li><a href="#">Ultra Plus</a></li> </ul> </li> <li class="hvr-sweep-to-bottom"> <a href="services.php">Broker Agency</a> </li> <li class="hvr-sweep-to-bottom"> <a href="maintenance.php">Maintenance</a> </li> <li class="hvr-sweep-to-bottom"> <a href="blog.php">Drivers</a> </li> <li class="hvr-sweep-to-bottom"> <a href="mail.php">Contact</a> </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: