ユーザーが下にスクロールしたときにヘッダーが所定の位置に残るように、position値を使用しました。fixed
問題は、ズームインすると、一部のタブが表示されない、またはアクセスできないことです。たとえば、次のようになります。
ズームインしても自分のタブを表示してアクセスできる方法はありますか?
私のコード:
HTML:
<div id="top">
<header>
<hgroup>
<h1>LOGO</h1>
</hgroup>
<nav>
<ul>
<li class="tabs"><a href="#">First</a></li>
<li class="tabs"><a href="#">Second</a></li>
<li class="tabs"><a href="#">Third</a></li>
<li class="tabs"><a href="#">Fourth</a></li>
</ul>
</nav>
</header>
CSS:
#top {
background-color: #1b1b1b;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 20px 100px;
width: 100%;
height: 70px;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
header {
position: relative;
width: 440px;
height: 70px;
margin: 0 auto;
}
header hgroup {
position: absolute;
display: block;
top: 5px;
left: -50px;
}
header hgroup h1 {
font-size: 50px;
color: #fff;
display: block;
height: 100px;
width: 610px;
}
nav {
float: right;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
color: #fff;
}
.tabs:hover {
border-bottom: 5px solid #fff;
}
nav ul li a:hover {
color: #fff;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #fff;
text-decoration: none;
}