Having Trouble Making Drop Down Mean

So I'm trying to build a simple drop down menu but I'm having the worst trouble trying to get it working. Anything would help <

Solution 1:

You need to set up a style so that when you hover over the parent <li>, the child <ul> appears.

And, you need to set some styles to make this work properly.

Here's some css that will get you started:

.navbar ul li {
    text-decoration: none; 
    list-style: none;
    color: #000;
    display: inline-block;
    /* Need position: relative to make your sub-nav behave */
    position: relative;
}

/* This rule is necessary to hide the dropdown */
.navbar ul li ul {
    display: block;
    position: absolute;
    /* Moves it off the page, to the far left, so not visible */
    left: -999em;
    top: 20px; /* adjust as appropriate */
    width: 250px; /* adjust as appropriate */
}

/* This is how you make it show up when the li is hovered */
.navbar ul li:hover ul {
    left: auto;
}

Thanks to @Jean-Philippe Edmond for creating a jsFiddle