悬停

Question

＆＃13;

＆＃13;

/* FONTS */
@font-face {
    font-family:'MontserratNormal';
    src:url(../fonts/montserrat-regular-webfont.eot);
    src:url(../fonts/montserrat-regular-webfont.eot#iefix) format("embedded-opentype"),url(../fonts/montserrat-regular-webfont.woff) format("woff"),url(../fonts/montserrat-regular-webfont.ttf) format("truetype"),url(../fonts/montserrat-regular-webfont.svg#MontserratNormal) format("svg");
    font-weight:400;
    font-style:normal
}

@font-face {
    font-family:'MontserratBlack';
    src:url(../fonts/montserrat-black-webfont.eot);
    src:url(../fonts/montserrat-black-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/montserrat-black-webfont.woff) format("woff"),url(../fonts/montserrat-black-webfont.ttf) format("truetype"),url(../fonts/montserrat-black-webfont.svg#MontserratBlack) format("svg");
    font-weight:900;
    font-style:normal
}

@font-face {
    font-family:'MontserratBold';
    src:url(../fonts/montserrat-bold-webfont.eot);
    src:url(../fonts/montserrat-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/montserrat-bold-webfont.woff) format("woff"),url(../fonts/montserrat-bold-webfont.ttf) format("truetype"),url(../fonts/montserrat-bold-webfont.svg#MontserratBold) format("svg");
    font-weight:700;
    font-style:normal
}

@font-face {
    font-family:"ParentsSuckRegular";
    src:url(../fonts/parentssuck.eot);
    src:url(../fonts/parentssuck.eot#iefix) format("embedded-opentype"),url(../fonts/parentssuck.woff) format("woff"),url(../fonts/parentssuck.ttf) format("truetype"),url(../fonts/parentssuck.svg) format("svg");
    font-weight:700;
    font-style:normal
}

/* HEADER */
#logo {
    float:left
}

.mainHeader {
    clear:both;
    color:#000;
    background-color:#fff;
    height:30px;
    padding-bottom:30px
}

.mainNav {
    margin:0
}

.mainNav li {
    display:inline;
    margin-right:50px;
    font-family:MontserratBlack;
    text-transform:uppercase;
    font-size:35px;
    color:#BBB;
    position:static;
    line-height:1.9em
}

#about,#training,#news,#contact,a {
    color:#bcbcbc
}

#about:hover,#training:hover,#news:hover,#contact:hover,nav li .current {
    color:#13C63E
}

a {
    text-decoration:none
}

/* DROP-DOWN MENUS */
.dropdown {
    position:relative
}

.drop-nav {
    position:absolute;
    display:none
}

.drop-nav li {
    border-bottom:1px solid rgba(255,255,255,.2)
}

.dropdown:hover > .drop-nav {
    display:block
}

.dropdown1 {
    position:relative
}

.drop-nav1 {
    position:absolute;
    display:none
}

.drop-nav1 li {
    border-bottom:1px solid rgba(255,255,255,.2)
}

.dropdown1:hover > .drop-nav1 {
    display:block
}

＆＃13;

    <header class="mainHeader">
        <ul class="mainNav">
            <li>
                <a class="current" href="/" id="logo"><img src="images/logo.png"></a>
            </li>


            <li class="dropdown">
                <a href="/about" id="about">About</a>

                <ul class="drop-nav">
                    <li>
                        <a href="/testimonials">Testimonials</a>
                    </li>
                </ul>
            </li>


            <li id="news">Services</li>


            <li class="dropdown1">
                <ul class="drop-nav1">
                    <li>
                        <a href="/the-meltdown-bootcamp" id="bootcamp">The Meltdown</a>
                    </li>


                    <li>
                        <a href="/personal-training" id="personalTraining">Personal Training</a>
                    </li>


                    <li>
                        <a href="/PIYO" id="piyo">PIYO / Burn!</a>
                    </li>


                    <li>
                        <a href="/LBDProject" id="bootcamp">Little Black Dress</a>
                    </li>
                </ul>
            </li>


            <li>
                <a href="/training" id="training">Blog</a>
            </li>


            <li>
                <a href="/contact" id="contact">Contact Us</a>
            </li>
        </ul>
    </header>
 

＆＃13;

＆＃13;

＆＃13;

我的代码中有一个下拉菜单有点麻烦。我根据this.创建了一个，如您所见，第二个下拉菜单不会丢失。对不起，如果这是一个简单的问题，我两天前开始学习HTML和CSS。 谢谢！

Answer 1

让它为你工作http://jsfiddle.net/b64n0wdn/

你的html有点出了问题，对我们中最好的人来说没有什么大不了的事:)：/ / p>

你有第一个下拉状态：

 <li class="dropdown">
            <a href="/about" id="about">About</a>

            <ul class="drop-nav">
                <li>
                    <a href="/testimonials">Testimonials</a>
                </li>
            </ul>
        </li>

为了使其发挥作用，我必须提供＆＃34;服务＆＃34;在一个锚中，就像之前的下拉一样，如下：

 <li class="dropdown1">
            <a href="/services" id="news">Services</a>
            <ul class="drop-nav1">
                <li>
                    <a href="/the-meltdown-bootcamp" id="bootcamp">The     Meltdown</a>
                </li>


                <li>
                    <a href="/personal-training" id="personalTraining">Personal Training</a>
                </li>


                <li>
                    <a href="/PIYO" id="piyo">PIYO / Burn!</a>
                </li>


                <li>
                    <a href="/LBDProject" id="bootcamp">Little Black Dress</a>
                </li>
            </ul>
        </li>