Question

正如标题所暗示的那样，我正在寻找使用CSS创建一个完整的多级下拉菜单。关于如何开始，我没有丝毫的线索。我已经进步了一点只是为了完全纠缠代码的代码。我几乎没有开始，并希望得到任何帮助，以更好地了解它的运作方式。我理解将它应用于第一个

CSS包含在jsfiddle中。

HTML

<body class="body">
    <header class="main-header">
        <img src="#" alt="Logo">

        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Main 1</a></li>
                <li><a href="#">Main 2</a></li>
                <li class="dropdown-left"><a href="#">Main 3</a></li>
                    <ul>
                        <li class="dropdown-right">Sub 1</li>
                            <ul>
                                <li><a href="#">Multi 1</a></li>
                                <li><a href="#">Multi 2</a></li>
                                <li><a href="#">Multi 3/a></li>
                                <li><a href="#">Multi 4</a></li>
                                <li><a href="#">Multi 5</a></li>
                            </ul>
                        <li class="dropdown-right">Sub 2</li>
                            <ul>
                                <li><a href="#">Multi 1</a></li>
                                <li><a href="#">Multi 2</a></li>
                                <li><a href="#">Multi 3/a></li>
                                <li><a href="#">Multi 4</a></li>
                                <li><a href="#">Multi 5</a></li>
                            </ul>
                    </ul>
                <li class="dropdown-left"><a href="#">Main 4</a></li>
                    <ul>
                        <li class="dropdown-right">Sub 1</li>
                            <ul>
                                <li><a href="#">Multi 1</a></li>
                                <li><a href="#">Multi 2</a></li>
                                <li><a href="#">Multi 3/a></li>
                            </ul>
                        <li class="dropdown-right">Sub 2</li>
                            <ul>
                                <li><a href="#">Multi 1</a></li>
                                <li><a href="#">Multi 2</a></li>
                                <li><a href="#">Multi 3/a></li>
                            </ul>
                    </ul>
                <li><a href="#">Main 5</a></li>
            </ul>
        </nav>
    </header>

    <div class="maincontent">
        <div class="content">
            <article class="topcontent">
                <header>
                    <h2><a href="#">Welcome</a></h2>
                </header>

                <footer>
                    <p class="subheader">This is under title of content</p>
                </footer>

                <div class="articlecontent">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunt</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunt</p>
                </div>
            </article>
            <article class="bottomcontent">
                <header>
                    <h2><a href="#">Title of Content</a></h2>
                </header>

                <footer>
                    <p class="subheader">This is under title of content</p>
                </footer>

                <div class="articlecontent">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunt</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunt</p>
                </div>
            </article>
        </div>
    </div>

    <aside class="topsidebar">
        <article>
                <img src="" alt="QR Code" style="display: block; margin: auto;">
        </article>
    </aside>

    <aside class="middlesidebar">
        <article>
            <h2>Middle Sidebar</h2>
            <p>asdgfauisdg oisdaoisdfoia sdfoasfasfsf ufi iufdfia ioudsf oidoiusdf dsf as </p>
        </article>
    </aside>

    <footer class="mainfooter">
        <p>Copyright information, etc.</p>
    </footer>
</body>

Answer 1

已经很晚了，这么短的解释和例子 - 希望它有所帮助：）

您不会将子子包含在父菜单中......

应该是这样的：

<ul>
    <li><a href="#">main</a>
        <ul>
            <li><a href="#">sub</a></li>
        </ul>
     </li>
</ul>

示例

HTML CODE：

<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Main 1</a> <ul> <li><a href="#">sub 1</a> <ul> <li><a href="#">sub sub 1</a></li> <li><a href="#">sub sub 2</a></li> </ul> </li> <li><a href="#">sub 2</a></li> </ul> </li> </ul>

CSS代码：

#menu{ width:100%; background:#000; } #menu > li{ display:inline-block; position:relative; line-height:20px; } #menu a{ display:block; text-decoration:none; padding:0px 10px; color:#fff; text-align:center; } #menu li ul{ position: absolute; top: 20px; left:0; min-width:150px; background-color:silver; } #menu ul ul{ top:0; left:150px; } #menu li li a:hover{ background:red; } #menu li ul{ display: none; } #menu li:hover > ul{ display:block; }

小提琴：http://jsfiddle.net/6SDma/

多级CSS3下拉菜单

1 个答案: