当前位置：Gxlcms > css > 如何使用CSS实现的大型下拉菜单

如何使用CSS实现的大型下拉菜单

时间：2021-07-01 10:21:17 帮助过：15人阅读

下拉菜单在很多网页中都能应用到，这篇文章主要介绍了纯CSS实现的大型下拉菜单的示例代码的相关资料，内容挺不错的，现在分享给大家，也给大家做个参考。

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

HTML结构

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

  1. <nav>
  2.   <ul class="container ul-reset">
  3.     <li><a href='#'>Home</a></li>
  4.     <li class='droppable'>
  5.       <a href='#'>Category One</a>
  6.       <p class='mega-menu'>
  7.         <p class="container cf">
  8.           <ul class="ul-reset">
  9.             <h3>Heading 1</h3>
  10.             <li><a href='#'>Category One Sublink</a></li>
  11.             <li><a href='#'>Category One Sublink</a></li>
  12.             <li><a href='#'>Category One Sublink</a></li>
  13.             <li><a href='#'>Category One Sublink</a></li>
  14.             <li><a href='#'>Category One Sublink</a></li>
  15.           </ul><!-- .ul-reset -->
  16.           <ul class="ul-reset">
  17.             <h3>Heading 2</h3>
  18.             <li><a href='#'>Category One Sublink</a></li>
  19.             <li><a href='#'>Category One Sublink</a></li>
  20.             <li><a href='#'>Category One Sublink</a></li>
  21.             <li><a href='#'>Category One Sublink</a></li>
  22.             <li><a href='#'>Category One Sublink</a></li>
  23.           </ul><!-- .ul-reset -->
  24.           <ul class="ul-reset">
  25.             <h3>Heading 3</h3>
  26.             <li><a href='#'>Category One Sublink</a></li>
  27.             <li><a href='#'>Category One Sublink</a></li>
  28.             <li><a href='#'>Category One Sublink</a></li>
  29.             <li><a href='#'>Category One Sublink</a></li>
  30.             <li><a href='#'>Category One Sublink</a></li>
  31.           </ul><!-- .ul-reset -->
  32.           <ul class="ul-reset">
  33.             <h3>Heading 4</h3>
  34.             <li><img src="http://placehold.it/205x172"></li>
  35.           </ul>
  36.         </p><!-- .container -->
  37.       </p><!-- .mega-menu -->
  38.     </li><!-- .droppable -->
  39.     <li class='droppable'>
  40.       <a href='#'>Category Two</a>
  41.       <p class='mega-menu'>
  42.         <p class="container cf">
  43.           <ul class="ul-reset">
  44.             <h3>Heading 1</h3>
  45.             <li><a href='#'>Category Two Sublink</a></li>
  46.             <li><a href='#'>Category Two Sublink</a></li>
  47.             <li><a href='#'>Category Two Sublink</a></li>
  48.             <li><a href='#'>Category Two Sublink</a></li>
  49.             <li><a href='#'>Category Two Sublink</a></li>
  50.           </ul><!-- .ul-reset -->
  51.           <ul class="ul-reset">
  52.             <h3>Heading 2</h3>
  53.             <li><a href='#'>Category Two Sublink</a></li>
  54.             <li><a href='#'>Category Two Sublink</a></li>
  55.             <li><a href='#'>Category Two Sublink</a></li>
  56.             <li><a href='#'>Category Two Sublink</a></li>
  57.             <li><a href='#'>Category Two Sublink</a></li>
  58.           </ul><!-- .ul-reset -->
  59.           <ul class="ul-reset">
  60.             <h3>Heading 3</h3>
  61.             <li><a href='#'>Category Two Sublink</a></li>
  62.             <li><a href='#'>Category Two Sublink</a></li>
  63.             <li><a href='#'>Category Two Sublink</a></li>
  64.             <li><a href='#'>Category Two Sublink</a></li>
  65.             <li><a href='#'>Category Two Sublink</a></li>
  66.           </ul><!-- .ul-reset -->
  67.           <ul class="ul-reset">
  68.             <h3>Heading 4</h3>
  69.             <li><a href='#'>Category Two Sublink</a></li>
  70.             <li><a href='#'>Category Two Sublink</a></li>
  71.             <li><a href='#'>Category Two Sublink</a></li>
  72.             <li><a href='#'>Category Two Sublink</a></li>
  73.             <li><a href='#'>Category Two Sublink</a></li>
  74.           </ul><!-- .ul-reset -->
  75.         </p><!-- .container -->
  76.       </p><!-- .mega-menu-->
  77.     </li><!-- .droppable -->
  78.     <li><a href='#'>Category Three</a></li>
  79.     <li><a href='#'>Category Four</a></li>
  80.     <li><a href='#'>Category Five</a></li>
  81.     <li><a href='#'>Category Six</a></li>
  82.   </ul><!-- .container .ul-reset -->
  83. </nav>

CSS

为该大型菜单添加下面的CSS样式：

  1. /* #Resets
  2. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  3. html {box-sizing: border-box;}
  4. *, *:before, *:after {box-sizing: inherit;  }
  5. /* #Universal and Default Styles
  6. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  7. body {
  8.     background: url(../img/black-wood-small.jpg);
  9.     color: #ddd;
  10.     font-family: "Open Sans", sans-serif;
  11.     font-size: 14px;
  12.   line-height: 1;
  13.   margin: 0;
  14.   padding: 0;
  15.   text-align: center;
  16. }
  17. a {text-decoration: none;}
  18. h1 {
  19.   font-size: 40px;
  20.     font-weight: 700;
  21.   margin-bottom: 20px;
  22.     margin-top: 20px;
  23. }
  24. h2 {
  25.   font-size: 15px;
  26.     font-weight: 600;
  27.   margin-bottom: 30px;
  28.     margin-top: 10px;
  29. }
  30. .container {
  31.   margin: auto;
  32.   width: 940px;
  33. }
  34. .ul-reset {
  35.   padding-left: 0;
  36.    margin-top: 0;
  37.    margin-bottom: 0;
  38.   list-style: none;
  39. }
  40. /* #Navigation Styles
  41. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  42. nav {
  43.   background: #424242;
  44.   font-size: 0;
  45.   position: relative;
  46. }
  47. nav > ul > li {
  48.   display: inline-block;
  49.     font-size: 14px;
  50.     padding: 0 15px;
  51.     position: relative;
  52. }
  53. nav > ul > li:first-child {padding-left: 0;}
  54. nav > ul > li:last-child {padding-right: 0;}
  55. nav > ul > li > a {
  56.   color: #fff;
  57.     display: block;
  58.     position: relative;
  59.     padding: 20px 0;
  60.     border-bottom: 3px solid transparent;
  61. }
  62. nav > ul > li:hover > a {
  63.   color: #69aae0; 
  64.     border-bottom: 3px solid #69aae0;
  65. }
  66. /* #Mega Menu Styles
  67. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  68. .mega-menu {
  69.   background: #f0f0f0;
  70.     display: none;
  71.     left: 0;
  72.     position: absolute;
  73.     text-align: left;
  74.     width: 100%;
  75. }
  76. .mega-menu h3 {color: #444;}
  77. .mega-menu ul {
  78.   float: left;
  79.     margin-bottom: 20px;
  80.     margin-right: 40px;
  81.     width: 205px;
  82. }
  83. .mega-menu ul:last-child {margin-right: 0;}
  84. .mega-menu a {
  85.   border-bottom: 1px solid #ddd;
  86.     color: #4ea3d8;
  87.     display: block;
  88.     padding: 10px 0;
  89. }
  90. .mega-menu a:hover {color: #2d6a91;}
  91. /* #Droppable Class Styles
  92. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  93. .droppable {position: static;}
  94. .droppable > a:after {
  95.   content: "\f107";
  96.     font-family: FontAwesome;
  97.     font-size: 12px;
  98.     padding-left: 6px;
  99.     position: relative;
  100.     top: -1px;
  101. }
  102. .droppable:hover .mega-menu {display: block;}
  103. /* #Browser Clearfix
  104. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  105. .cf:before,
  106. .cf:after {
  107.   content: " "; /* 1 */
  108.    display: table; /* 2 */
  109. }
  110. .cf:after {clear: both;}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用CSS3实现瀑布流布局

CSS3和HTML5网页加载进度条的实现

以上就是如何使用CSS实现的大型下拉菜单的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！