HTML
正如标题所暗示的，我希望用CSS创建一个成熟的多级下拉菜单。我一点也不知道该怎么开始。我已经取得了一些进展，只是将代码完全缠结在一起。我才刚刚开始，如果能帮助我更好地理解它是如何运作的，我将不胜感激。我理解你第一次申请它
CSS包含在jsfiddle中。
http://jsfiddle.net/ks5SL/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>
很晚了，所以简短的解释和例子-希望它有帮助:)
不能将子菜单包含在父菜单中…
应该是这样的:
<ul>
<li><a href="#">main</a>
<ul>
<li><a href="#">sub</a></li>
</ul>
</li>
</ul>
HTML代码:
<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>
#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/