Can't seem to get hover for drop down menu to work via CSS

Question

so I'm trying to get a handle on web designing and such (again). Haven't practiced in a long long time, I've been doing tutorials via codecademy.

Now I wanted to edit the code myself and change things as much as i could.

I can't seem to get the drop down menu to work. I got it to work using javascript toggle but I don't like that I have to reclick the menu to close it, and I'd much prefer the hover method via css as its also simpler (or so i thought lol).

now a lot of the examples I've seen use the pound sign " # ", I don't understand why, I've always known to use " .whatever " for my class selector.

my html code for the section i wanted the drop down menu for:

        <ul class="menu">
            <li class="dropdown"><a href=# class="dropdown-toggle">Join a Clan<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://battlelog.battlefield.com/bf4/platoons/view/4707849498545743143/">Warriors[WAR]</a>
                    </li>
                    <li><a href="http://socialclub.rockstargames.com/crew/twizted">Twizted[TWIZ]</a>
                    </li>
                </ul>
            </li>

and entire CSS for it:

    .container {
        width: 960px;
    }
    /* Header */
     .header {
        background-color: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #ddd;
        font-family:'Oswald', sans-serif;
        font-weight: 300;
        font-size: 17px;
        padding: 15px;
    }
    /* Menu */
     .header .menu {
        float: right;
        list-style: none;
        margin-top: 5px;
    }
    .menu > li {
        display: inline;
        padding-left: 20px;
        padding-right: 20px;
    }
    .menu a {
        color: #898989;
    }



/* Dropdown */
     .dropdown-menu:hover {
        font-size: 16px;
        margin-top: 5px;
        min-width: 105px;
    }
    .dropdown-menu:hover li a {
        color: #898989;
        padding: 6px 20px;
        font-weight: 300;
    }


    /* Carousel */
     .slider {
        position: relative;
        width: 100%;
        height: 470px;
        border-bottom: 1px solid #ddd;
    }
    .slide {
        background-size: cover;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .active-slide {
        display: block;
    }
    .slide-copy h1 {
        color: #363636;
        font-family:'Oswald', sans-serif;
        font-weight: 400;
        font-size: 40px;
        margin-top: 105px;
        margin-bottom: 0px;
    }
    .slide-copy h2 {
        color: #b7b7b7;
        font-family:'Oswald', sans-serif;
        font-weight: 400;
        font-size: 40px;
        margin: 5px;
    }
    .slide-copy p {
        color: #959595;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.15em;
        line-height: 1.75em;
        margin-bottom: 15px;
        margin-top: 16px;
    }
    .slide-img {
        text-align: right;
    }
    /* Slide feature */
     .slide-feature {
        text-align: center;
        height: 470px;
    }
    .slide-feature img {
        margin-top: 112px;
        margin-bottom: 28px;
    }
    .slide-feature a {
        display: block;
        color: #6fc5e0;
        font-family:"HelveticaNeueMdCn", Helvetica, sans-serif;
        font-family:'Oswald', sans-serif;
        font-weight: 400;
        font-size: 20px;
    }
    .slider-nav {
        text-align: center;
        margin-top: 20px;
    }
    .arrow-prev {
        margin-right: 45px;
        display: inline-block;
        vertical-align: top;
        margin-top: 9px;
    }
    .arrow-next {
        margin-left: 45px;
        display: inline-block;
        vertical-align: top;
        margin-top: 9px;
    }
    .slider-dots {
        list-style: none;
        display: inline-block;
        padding-left: 0;
        margin-bottom: 0;
    }
    .slider-dots li {
        color: #bbbcbc;
        display: inline;
        font-size: 30px;
        margin-right: 5px;
    }
    .slider-dots li.active-dot {
        color: #363636;

Answer 1

You are putting :hover on the wrong element. Try this:

.dropdown-menu {
    font-size: 16px;
    margin-top: 5px;
    min-width: 105px;
    display: none;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown .dropdown-menu li a {
    color: #898989;
    padding: 6px 20px;
    font-weight: 300;
}