如何製作具有對稱背景的導航菜單項

Question

我試圖獲取固定每個導航鏈接的背景。我希望它在每個鏈接背後都是統一的，這意味着在左側和右側都是相等的。

Link到實際的網頁。

請參閱圖片下面的代碼。

謝謝。

<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>

而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

您已經添加了一些JavaScript，以及（F或動畫和滑動下降）。我能夠模仿一些沒有動畫的東西，但是按預期工作。看看這裏的全屏：

* { 
 
    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>

---

更新

要解決問題，請將其添加到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; 
} 

所以這給了像這樣的輸出：