CSS MegaMenu 悬停显示嵌套内容

Question

我一直在尝试构建大型导航，但我不知道如何定位 anchor 并使其下拉内容自动显示。我在 http://codepen.io/shanekweb/pen/EZpjKo 有一个我在 codepen 上的工作示例

举个例子，如果我将鼠标悬停在第一个新闻链接上并显示更多链接，我需要在悬停主要元素新闻时自动显示“一个”右侧弹出的内容。

我需要这个，以便客户在将鼠标悬停在主要元素上时立即看到所有第一个子链接的内容。

    <div class="droppable">
        <a class="firstLink" href="#">News</a>
        <div class="megaNav">
            <div class="drop1st">
                <div class="parentMenu">
                    <ul>
                        <li><strong>first heading</strong></li>
                        <li class="expand">
                            <a href="#">one</a>
                            <div class="rightContent">
                                <section class="rightContent1">
                                    <h4>Title 1</h4>
                                </section><!--rightContent1-->
                                <section class="rightContent2">
                                    <h4>Title 2</h4>
                                </section><!--rightContent2-->
                                <section class="rightContent2">
                                    <h4>Title 3</h4>
                                </section><!--rightContent3-->
                            </div><!--rightContent-->
                        </li>
                        <li class="expand">
                            <a href="#">two</a>
                            <div class="rightContent">
                                <section class="rightContent1">
                                    <h4>Title 4</h4>
                                </section><!--rightContent1-->
                                <section class="rightContent2">
                                    <h4>Title 5</h4>
                                </section><!--rightContent2-->
                                <section class="rightContent2">
                                    <h4>Title 6</h4>
                                </section><!--rightContent3-->
                            </div><!--rightContent-->
                        </li>
                        <li class="expand">
                            <a href="#">three</a>
                            <div class="rightContent">
                                <section class="rightContent1">
                                    <h4>Title 7</h4>
                                </section><!--rightContent1-->
                                <section class="rightContent2">
                                    <h4>Title 8</h4>
                                </section><!--rightContent2-->
                                <section class="rightContent2">
                                    <h4>Title 9</h4>
                                </section><!--rightContent3-->
                            </div><!--rightContent-->
                        </li>
                    </ul>
                </div>
            </div>
        </div><!--megaNav-->
    </div><!--droppable-->


    <div class="droppable">
        <a class="firstLink" href="#">top brands &amp; agencies</a>
        <div class="megaNav">
            <div class="drop1st">
                <div class="parentMenu">
                    <ul>
                        <li><strong>second heading</strong></li>
                        <li class="expand">
                            <a href="#">one</a>
                            <div class="rightContent">
                                <section class="rightContent1">
                                    <h4>Title 1</h4>
                                </section><!--rightContent1-->
                                <section class="rightContent2">
                                    <h4>Title 2</h4>
                                </section><!--rightContent2-->
                                <section class="rightContent2">
                                    <h4>Title 3</h4>
                                </section><!--rightContent3-->
                            </div><!--rightContent-->
                        </li>
                        <li class="expand">
                            <a href="#">two</a>
                            <div class="rightContent">
                                <section class="rightContent1">
                                    <h4>Title 4</h4>
                                </section><!--rightContent1-->
                                <section class="rightContent2">
                                    <h4>Title 5</h4>
                                </section><!--rightContent2-->
                                <section class="rightContent2">
                                    <h4>Title 6</h4>
                                </section><!--rightContent3-->
                            </div><!--rightContent-->
                        </li>
                        <li class="expand">
                            <a href="#">three</a>
                            <div class="rightContent">
                                <section class="rightContent1">
                                    <h4>Title 7</h4>
                                </section><!--rightContent1-->
                                <section class="rightContent2">
                                    <h4>Title 8</h4>
                                </section><!--rightContent2-->
                                <section class="rightContent2">
                                    <h4>Title 9</h4>
                                </section><!--rightContent3-->
                            </div><!--rightContent-->
                        </li>
                    </ul>
                </div>
            </div>
        </div><!--megaNav-->
    </div><!--droppable-->

</nav><!--mainNav-->



#mainNav {
margin: auto;
max-width: 1242px;
position: relative;
box-sizing: border-box;

a {
    text-decoration: none;
}

.droppable {
    float: left;

    a.firstLink:hover > .megaNav > .parentMenu > li.expand:first-child {
        > .rightContent {
            display: block;
        }
    }

    > a {
        padding: 5px 15px;
    }

    .megaNav {
        display: none;
        position: absolute;
        left: 0;
        width: 100%;

        .drop1st {
            overflow: auto;
            position: relative;
            z-index: 2;
            background: #fff;
            min-height: 380px;
            background: #efefef;

            .parentMenu {
                width: 16%;
                min-height: 380px;
                background: #fafafa;

                ul {
                    margin-left: 0;
                    list-style: none;
                    padding-left: 0;
                }

                li.expand:hover > div {
                    display: block;
                }

                .rightContent {
                    display: none;
                    position: absolute;
                    left: 16%;
                    top: 0;
                    width: 84%;
                    min-height: 380px;

                    h4 {
                        margin: 0;
                    }

                    .rightContent1 {
                        width: 25%;
                        float: left;
                    }

                    .rightContent2 {
                        width: 25%;
                        float: left;
                    }

                    .rightContent3 {
                        width: 50%;
                        float: left;
                    }
                }

                ul {
                    margin: 0;
                }

            }
        }
    }

    &:hover {
        .megaNav {
            display: block;
        }
    }
}
}

我在 css 中尝试的是这样的，但我无法让它工作

a.firstLink:hover > .megaNav > .parentMenu > li.expand:first-child {
    > .rightContent {
        display: block;
    }
}

Answer 1

您可以使用 sibling selector (+) 选择 .firstLink 之后的 .megaNav，然后使用简单的嵌套——即 .classone 。 classtwo – 而不是使用 > 选择器，它在某些情况下过于具体。 (例如，.parentMenu 的父级是.drop1st，而不是.megaNav，所以.megaNav > .parentMenu 不会选择任何东西。)

您还必须使用 !important 来覆盖 display: none 的其他样式。

结果是:

.firstLink + .megaNav .parentMenu li.expand:nth-of-type(2) .rightContent {
    display: block !important;
}

不过请注意，这将需要该规则的许多变体才能使所有内容正确显示，因为您必须切换 display: none 和 display: block 每次都带有 !important，生成大量 CSS。如果可能，您可以尝试稍微简化标记并使您的 CSS 规则不那么具体，这样您就可以在不使用 !important 的情况下逃脱。