-1
/* FONTS */
@font-face {
font-family:'MontserratNormal';
src:url(../fonts/montserrat-regular-webfont.eot);
src:url(../fonts/montserrat-regular-webfont.eot#iefix) format("embedded-opentype"),url(../fonts/montserrat-regular-webfont.woff) format("woff"),url(../fonts/montserrat-regular-webfont.ttf) format("truetype"),url(../fonts/montserrat-regular-webfont.svg#MontserratNormal) format("svg");
font-weight:400;
font-style:normal
}
@font-face {
font-family:'MontserratBlack';
src:url(../fonts/montserrat-black-webfont.eot);
src:url(../fonts/montserrat-black-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/montserrat-black-webfont.woff) format("woff"),url(../fonts/montserrat-black-webfont.ttf) format("truetype"),url(../fonts/montserrat-black-webfont.svg#MontserratBlack) format("svg");
font-weight:900;
font-style:normal
}
@font-face {
font-family:'MontserratBold';
src:url(../fonts/montserrat-bold-webfont.eot);
src:url(../fonts/montserrat-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/montserrat-bold-webfont.woff) format("woff"),url(../fonts/montserrat-bold-webfont.ttf) format("truetype"),url(../fonts/montserrat-bold-webfont.svg#MontserratBold) format("svg");
font-weight:700;
font-style:normal
}
@font-face {
font-family:"ParentsSuckRegular";
src:url(../fonts/parentssuck.eot);
src:url(../fonts/parentssuck.eot#iefix) format("embedded-opentype"),url(../fonts/parentssuck.woff) format("woff"),url(../fonts/parentssuck.ttf) format("truetype"),url(../fonts/parentssuck.svg) format("svg");
font-weight:700;
font-style:normal
}
/* HEADER */
#logo {
float:left
}
.mainHeader {
clear:both;
color:#000;
background-color:#fff;
height:30px;
padding-bottom:30px
}
.mainNav {
margin:0
}
.mainNav li {
display:inline;
margin-right:50px;
font-family:MontserratBlack;
text-transform:uppercase;
font-size:35px;
color:#BBB;
position:static;
line-height:1.9em
}
#about,#training,#news,#contact,a {
color:#bcbcbc
}
#about:hover,#training:hover,#news:hover,#contact:hover,nav li .current {
color:#13C63E
}
a {
text-decoration:none
}
/* DROP-DOWN MENUS */
.dropdown {
position:relative
}
.drop-nav {
position:absolute;
display:none
}
.drop-nav li {
border-bottom:1px solid rgba(255,255,255,.2)
}
.dropdown:hover > .drop-nav {
display:block
}
.dropdown1 {
position:relative
}
.drop-nav1 {
position:absolute;
display:none
}
.drop-nav1 li {
border-bottom:1px solid rgba(255,255,255,.2)
}
.dropdown1:hover > .drop-nav1 {
display:block
}
<header class="mainHeader">
<ul class="mainNav">
<li>
<a class="current" href="/" id="logo"><img src="images/logo.png"></a>
</li>
<li class="dropdown">
<a href="/about" id="about">About</a>
<ul class="drop-nav">
<li>
<a href="/testimonials">Testimonials</a>
</li>
</ul>
</li>
<li id="news">Services</li>
<li class="dropdown1">
<ul class="drop-nav1">
<li>
<a href="/the-meltdown-bootcamp" id="bootcamp">The Meltdown</a>
</li>
<li>
<a href="/personal-training" id="personalTraining">Personal Training</a>
</li>
<li>
<a href="/PIYO" id="piyo">PIYO/Burn!</a>
</li>
<li>
<a href="/LBDProject" id="bootcamp">Little Black Dress</a>
</li>
</ul>
</li>
<li>
<a href="/training" id="training">Blog</a>
</li>
<li>
<a href="/contact" id="contact">Contact Us</a>
</li>
</ul>
</header>
時,我有一點麻煩,在我的代碼下拉菜單我的HTML + CSS下拉菜單中不會出現。我做了一個基於this.正如你所看到的,第二個下拉菜單不會下降。對不起,如果這是一個簡單的問題,我兩天前開始學習HTML和CSS。 謝謝!
請減少您的代碼並創建一個*最小*工作示例。傾銷所有代碼會使您難以篩選代碼並有時診斷問題。 – Terry
我第二個^。在重現問題時,您不需要包含所有內容,例如字體等,這些對於解決您的問題是完全沒有必要的。拋開批評,歡迎來到Stackoverflow! –