纯CSS实现的大型下拉菜单的示例代码

这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。

查看演示地址：css_menu

下载源码：css_menu_jb51.rar

HTML结构

该大型菜单的HTML结构如下：

<nav>
<ul class="container ul-reset">
<li><a href='#'>Home</a></li>
<li class='droppable'>
<a href='#'>Category One</a>
<div class='mega-menu'>
<div class="container cf">
<ul class="ul-reset">
<h3>Heading 1</h3>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 2</h3>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 3</h3>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
<li><a href='#'>Category One Sublink</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 4</h3>
<li><img src="http://placehold.it/205x172"></li>
</ul>
</div><!-- .container -->
</div><!-- .mega-menu -->
</li><!-- .droppable -->
<li class='droppable'>
<a href='#'>Category Two</a>
<div class='mega-menu'>
<div class="container cf">
<ul class="ul-reset">
<h3>Heading 1</h3>
<li><a href='#'>Category Two Sublink</a></li>
<li><a href='#'>Category Two Sublink</a></li>
<li><a href='#'>Category Two Sublink</a></li>
<li><a href='#'>Category Two Sublink</a></li>
<li><a href='#'>Category Two Sublink</a></li>