![](/img/trans.png)
[英]How to make the orginial website background of a navigation menu fixed and 100% wide?
[英]How to make a navigation menu item with symmetrical background
我正在嘗試固定每個導航鏈接的背景。 我希望它在每個鏈接后面都統一,這意味着左右兩側相等。
鏈接到實際網頁。
請參見圖片下方的代碼。
謝謝。
<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 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); } /*---*/
您還添加了一些JavaScript(用於動畫和向下滑動)。 我能夠模仿沒有動畫但可以按預期工作的東西。 全屏查看:
* { 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;
}
所以這給出了這樣的輸出:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.