1
我遇到的問題是一旦窗口調整爲較小，CSS的格式。我遇到了很多麻煩，並認爲問題在於我的初始代碼;我只是不知道在哪裏。當瀏覽器調整大小時，下拉菜單不保持居中狀態
我對編碼和希望學習很新。
.nav-main {
\t position: absolute;
\t top: 0;
\t height: 65px;
\t width: 100%;
\t text-align: center;
}
.nav-main ul {
\t position: relative;
\t margin: 0 auto;
\t padding: 0;
\t list-style: none;
\t font-size: 22px;
\t line-height: 100%;
\t font-family: 'Futura W01 Bold', sans-serif;
\t text-align: center;
\t text-transform: uppercase;
\t display: inline-block;
\t width: 100%;
}
.nav-top {
\t position: relative;
\t margin: 0;
\t padding: 0 66px 0 50px;
\t float: none;
\t display: inline-block;
\t list-style: none;
}
.nav-top:first-child {
\t padding-left: 0;
}
.nav-top:last-child {
\t background-image: none;
\t padding-right: 0;
}
.nav-top:last-child:after {
\t content: none;
}
.nav-top > a {
\t position: relative;
\t display: block;
\t margin: 0;
\t color: #6f6f6f;
\t text-decoration: none;
\t padding-top: 20px;
\t padding-bottom: 5px;
\t -moz-transition: all 0.3s ease;
\t -ms-transition: all 0.3s ease;
\t -o-transition: all 0.3s ease;
\t transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active > a {
\t color: #454545;
\t border-bottom: 4px solid #00e9d9;
\t 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 {
\t padding-bottom: 16px;
\t border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top li > a {
\t position: relative;
\t display: inline;
\t margin: 0;
\t color: #6f6f6f;
\t text-decoration: none;
\t padding-top: 20px;
\t -moz-transition: all 0.3s ease;
\t -ms-transition: all 0.3s ease;
\t -o-transition: all 0.3s ease;
\t transition: all 0.3s ease;
}
.nav-top:after {
\t
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) {
\t .nav-main ul {
\t \t font-size: 18px;
\t }
\t .nav-top ul {
\t \t font-size: 15px;
\t }
\t .nav-main li {
\t \t padding: 0 46px 0 30px; /* 0 66 0 50 */
\t }
\t .nav-top li {
\t \t padding-top: 11px;
\t \t text-align: center;/* top 16 bottom 10*/
\t \t float: center;
\t }<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> \t \t \t \t \t
<span class="nav-arrow"></span>
</nav>的jsfiddle JS fiddle
使用媒體查詢或％爲寬度。 –
如何使用％寬度和下拉選項？當我使用寬度時，它會影響下方菜單的位置'about' –
您的代碼看起來不錯，即使對於小屏幕，下拉菜單居中。 – aavrug