Why isn't my Wordpress menu working correctly?

Question

I'm actually following along with a Lynda.com video about building a Wordpress website from scratch using Underscores.

We're designing the drop-down menu in the style.css.

The default code looked like this and worked fine:

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

but, since we needed to change the look, he instructs us to change it to this code, instead:

.main-navigation ul ul {
    position: absolute;
    left: 0;
    z-index: 99999;
    display: none;
    float: left;
    padding: 0;
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

Suddenly, the drop-downs are non-responsive.

I think I pinpointed the problem to the "display: none;" but taking that out just causes a mess. I tried just adding the background color like this:

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

but it ends up looking like this:

Obviously, I want this drop down below the links, not in front. Can anyone tell me how to fix this issue?

EDIT: I appreciate the people who tried answering so far but neither of the answers were correct. Thanks to David, I put my code into jsfiddle.net: http://jsfiddle.net/DMDesigns/5g9kbf9s/2/

Please let me know if one of you can figure it out, using this! Thank you!

Answer 1

with left: -999em; and display: none; contents are disappearing

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #4d4d4d;
    float: left;
    position: fixed;
    top: 1.5em;
    left: 1.5em;
    z-index: 99999;
}

Answer 2

Use the left position's value used in the original code:

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: 0;
z-index: 99999;

}

and not:

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}

Answer 3

I'm still not sure why his code was breaking the site but I did solve the problem I was having. I thought I should post it, just in case anyone else has a similar issues.

I left the code as it was, but added the background color and changed "top" from 1.5em to 3em to have it load correctly.

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 3.0em;
left: -999em;
z-index: 99999;
background: #9adcfd;

}

Thanks for everyone who tried!