My HTML + CSS drop-down menu does not appear when hovering - html

Question

/* 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">
About
<ul class="drop-nav">
<li>
Testimonials
</li>
</ul>
</li>
<li id="news">Services</li>
<li class="dropdown1">
<ul class="drop-nav1">
<li>
The Meltdown
</li>
<li>
Personal Training
</li>
<li>
PIYO / Burn!
</li>
<li>
Little Black Dress
</li>
</ul>
</li>
<li>
Blog
</li>
<li>
Contact Us
</li>
</ul>
</header>
I'm having a bit of trouble with a drop-down menu in my code. I made one based on this. As you can see, the second drop-down menu does not drop. Sorry if this is a simple issue, I started learning HTML and CSS two days ago.
Thanks!

Answer 1

Got it working for you http://jsfiddle.net/b64n0wdn/
Your html was a little bit out of wack, no big deal it happens to the best of us :)
In the you have the first drop down like:
<li class="dropdown">
About
<ul class="drop-nav">
<li>
Testimonials
</li>
</ul>
</li>
In order to make it work I had to put "services" in an anchor uniformly like that previous dropdown, like so:
<li class="dropdown1">
Services
<ul class="drop-nav1">
<li>
The Meltdown
</li>
<li>
Personal Training
</li>
<li>
PIYO / Burn!
</li>
<li>
Little Black Dress
</li>
</ul>
</li>