Question

我尝试使用HTML和CSS中的下拉菜单创建一个菜单栏，但我的代码不会给我想要的结果，而且我不确定原因。我相信菜单应该是ul ul，带有display：block;在悬停时，但ul ul的文本不会出现在行中。

<nav id = "top_menu">

    <ul>
        <li><a href="index.php">Home</a></li>
        <li>Our Chapter</a></li>
            <ul>
                <li><a href = "ExecutiveBoard.php"</a></li>
                <li><a href = "ourBrothers.php"</a></li>
                <li><a href = "chapterHistory.html"</a></li>
            <ul>
        <li>Nationals</li>
        <li>We Give Back</li>
        <li>Recruitment</li>
        <li>Contact Us</li>
        <li>Donate</li>
    </ul>
</nav>

CSS

#top_menu {
        background: #007FFF;
        opacity: 0.6;
        text-align: center;
    }

    #top_menu li{
        display:inline-block;
        list-style: none;
        padding: 10px;
        color: white;
    }

    #top_menu li:hover {
        background: yellow;
        opacity: 0.6;
    }
    nav ul ul {
        display: none;
    }

    nav ul li:hover > ul {
        display: block;
    }

谢谢！

Answer 1

这是My Example。这是n级的规则。你应该看。如果你有一些问题，你应该联系我。感谢

HTML：

<div id="ewm_header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <header id="ewm_header1">
                    <div class="logo">
                        <a href="http://cssmenufree.com" title="logo">
                            <img src="http://cssmenufree.com/img/logo.png" alt="logo" data-retina="http://cssmenufree.com/img/logo@2x.png" width="131" height="21">
                        </a>
                    </div>
                    <div class="menu-nav right">
                        <nav class="mainnav" id="mainnav">
                            <ul class="menu-wrap anima-bottom">
                                <li class="children">
                                    <a href="#">HOME</a>
                                    <ul class="sub-menu" style="margin-left: 0px;">
                                        <li class="children">
                                            <a href="#">HOME VERSION 1</a>
                                            <ul class="sub-menu">
                                                <li class=""><a href="#">HOME DARK</a></li>
                                                <li class=""><a href="#">HOME LIGHT</a></li>
                                            </ul>
                                        </li>
                                        <li class=""><a href="#">HOME VERSION 2</a></li>
                                        <li class=""><a href="#">HOME VERSION 3</a></li>
                                    </ul>
                                </li>
                                <li class="children">
                                    <a href="#">ABOUT</a>
                                    <ul class="sub-menu" style="margin-left: 0px;">
                                        <li class=""><a href="#">ABOUT VERSION 1</a></li>
                                        <li class=""><a href="#">ABOUT VERSION 2</a></li>
                                    </ul>
                                </li>
                                <li class=""><a href="#">PORTFOLIO</a></li>
                                <li class=""><a href="#">BLOG</a></li>
                                <li class=""><a href="#">SERVICES</a></li>
                                <li class=""><a href="#">CONTACT</a></li>
                            </ul>
                        </nav>
                    </div>
                </header>
            </div>
        </div>
    </div>
</div>
<span>You can copy code css. It run with menu in wordpress</span>

CSS：

.menu-wrap > li {
    float: left;
    position: relative;
    padding: 5px 15px;
}

.menu-wrap li ul {
    position: absolute;
    visibility: hidden;
    top: 100%;
    left: 0;
    background: #011d27;
    z-index: 999;
    width: 200px;
}

.menu-wrap li:hover > ul,
.menu-wrap li ul li:hover ul {
    visibility: visible;
}

.menu-wrap li ul li {
    padding: 10px 5px;
}

.menu-wrap li ul li ul {
    left: 100%;
    top: 0;
}

菜单栏无法正常工作

1 个答案: