我遇到的问题是一旦窗口调整为更小的 CSS 格式。我遇到了很多麻烦,并认为问题出在我的初始代码上;我只是不确定在哪里。
我对编码很陌生,希望学习。
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 100%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active > a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: block;
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top:hover ul {
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 10px;
text-align: inherit;
}
.nav-top li:last-child {
padding-bottom: 16px;
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
@media only screen and (max-width:960px) {
.nav-main ul {
font-size: 18px;
}
.nav-top ul {
font-size: 15px;
}
.nav-main li {
padding: 0 46px 0 30px; /* 0 66 0 50 */
}
.nav-top li {
padding-top: 11px;
text-align: center;/* top 16 bottom 10*/
float: center;
}
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top"><a href="#welcome">Welcome</a></li>
<li class="nav-top"><a href="#about">About</a>
<ul class="drop-down">
<li class="nav-drop"><a href="#services">Services</a></li>
<li class="nav-drop"><a href="#client">Clients</a></li>
<li class="nav-drop"><a href="#press">Press</a></li>
<li class="nav-drop"><a href="#leadership">Leadership</a></li>
<li class="nav-drop"><a href="#twitter">Follow Us</a></li>
</ul>
</li>
<li class="nav-top"><a href="#contact">Contact</a></li>
</ul>
<span class="nav-arrow"></span>
</nav>
JSFIDDLE JS fiddle
最佳答案
@media only screen and (max-width:960px)
上的 .nav-main li
正在影响它。
您可以使用 :not
选择器 .nav-main li:not(.nav-drop)
或覆盖 .nav-drop
与 padding-left: 0;右填充:0
。
如果您使用其他媒体查询,请不要忘记修改它。
关于html - 浏览器调整大小时,下拉菜单不会保持居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41560578/