![](/img/trans.png)
[英]How can I get my CSS hover effect to cover the entire top and bottom of my navigation bar?
[英]How do I get my navigation bar to cover the whole page?
我對這種東西還很陌生。 我只希望導航欄從一側到另一側覆蓋頁面,而不是在兩側和頂部都留有空白。
這是我的CSS
nav ul {list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;}
nav li {float: left;}
nav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover{background-color: #7559A6;}
Here is my HTML
<nav>
<ul>
<li><a href="home.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
給您的導航ID
<nav id=nav">
並將其寬度設置為100%
#nav{
width:100%;
}
首先,從body
刪除默認邊距
body {
margin: 0;
}
然后:
CSS表
body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: table; width: 100%; } nav li { display: table-cell } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; }
<nav> <ul> <li><a href="home.html" class="active">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="resume.html">Resume</a> </li> <li><a href="blog.html">Blog</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav>
Flexbox的
body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: flex; } nav li { flex:1; } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; }
<nav> <ul> <li><a href="home.html" class="active">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
添加你的CSS
nav{ position: absolute; width: 100%;left: 0;top: 0;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.