Question

所以我正试图处理网页设计等问题（再次）。在很长一段时间没有练习，我一直在通过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;

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

似乎无法悬停下拉菜单以通过CSS工作

1 个答案: