徘徊

2015-08-08 154 views
-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。 謝謝!

+1

請減少您的代碼並創建一個*最小*工作示例。傾銷所有代碼會使您難以篩選代碼並有時診斷問題。 – Terry

+0

我第二個^。在重現問題時,您不需要包含所有內容,例如字體等,這些對於解決您的問題是完全沒有必要的。拋開批評,歡迎來到Stackoverflow! –

回答

0

免費得到它的工作,你http://jsfiddle.net/b64n0wdn/

你的HTML也有一點點出怪人的,沒什麼大不了它發生在我們最好的:)

在你第一個下拉,如:

<li class="dropdown"> 
      <a href="/about" id="about">About</a> 

      <ul class="drop-nav"> 
       <li> 
        <a href="/testimonials">Testimonials</a> 
       </li> 
      </ul> 
     </li> 

爲了讓它工作,我不得不把「服務」於錨的均勻像以前的下拉列表中,像這樣:

<li class="dropdown1"> 
      <a href="/services" id="news">Services</a> 
      <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>