似乎无法将鼠标悬停在下拉菜单上以通过CSS工作

因此，我试图再次尝试进行网页设计等。很长一段时间没有练习，我一直在通过codecademy进行教程。

现在，我想自己编辑代码并尽我所能进行更改。

我似乎无法使下拉菜单正常工作。我使用javascript切换使它起作用，但我不喜欢我必须重新单击菜单以将其关闭，并且我更喜欢通过css进行悬停的方法，因为它也更简单（或者我以为大声笑）。

现在，我看到的许多示例都使用井号“＃”，但我不明白为什么，我一直都知道对类选择器使用“ .whatever”。

我想要的部分的html代码：

        <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>

以及整个CSS：

    .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;