html - 似乎无法通过 CSS 将鼠标悬停在下拉菜单上

Question

所以我(再次)尝试掌握网页设计等方面的知识。好久没练习了，一直在codecademy上做教程。

现在我想自己编辑代码并尽可能多地进行更改。

我似乎无法使用下拉菜单。我使用 javascript toggle 让它工作，但我不喜欢我必须重新单击菜单才能关闭它，而且我更喜欢通过 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;

Answer 1

您将 :hover 放在了错误的元素上。试试这个:

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