Sample code for a large drop-down menu implemented in pure CSS

Sample code for a large drop-down menu implemented in pure CSS

This is a large drop-down menu implemented purely in CSS. This large menu is made with HTML and pure CSS code, without any js code and does not rely on any third-party plug-ins. It is suitable for large websites with many column categories.

View the demo address: css_menu

Download source code: css_menu_jb51.rar

HTML Structure

The HTML structure of this mega menu is as follows:

<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>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</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>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 3</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>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 4</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>
          </ul><!-- .ul-reset -->
        </div><!-- .container -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->
    <li><a href='#'>Category Three</a></li>
    <li><a href='#'>Category Four</a></li>
    <li><a href='#'>Category Five</a></li>
    <li><a href='#'>Category Six</a></li>
  </ul><!-- .container .ul-reset -->
</nav>

CSS

Add the following CSS styles for the mega menu:

/* #Resets
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit; }
/* #Universal and Default Styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
    background: url(../img/black-wood-small.jpg);
    color: #ddd;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: center;
}
a {text-decoration: none;}
h1 {
  font-size: 40px;
    font-weight: 700;
  margin-bottom: 20px;
    margin-top: 20px;
}
h2 {
  font-size: 15px;
    font-weight: 600;
  margin-bottom: 30px;
    margin-top: 10px;
}
.container {
  margin: auto;
  width: 940px;
}
.ul-reset {
  padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
  list-style: none;
}
/* #Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
  background: #424242;
  font-size: 0;
  position: relative;
}
nav > ul > li {
  display: inline-block;
    font-size: 14px;
    padding: 0 15px;
    position: relative;
}
nav > ul > li:first-child {padding-left: 0;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {
  color: #fff;
    display: block;
    position: relative;
    padding: 20px 0;
    border-bottom: 3px solid transparent;
}
nav > ul > li:hover > a {
  color: #69aae0; 
    border-bottom: 3px solid #69aae0;
}
/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {
  background: #f0f0f0;
    display: none;
    left: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}
.mega-menu h3 {color: #444;}
.mega-menu ul {
  float: left;
    margin-bottom: 20px;
    margin-right: 40px;
    width: 205px;
}
.mega-menu ul:last-child {margin-right: 0;}
.mega-menu a {
  border-bottom: 1px solid #ddd;
    color: #4ea3d8;
    display: block;
    padding: 10px 0;
}
.mega-menu a:hover {color: #2d6a91;}
/* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {position: static;}
.droppable > a:after {
  content: "\f107";
    font-family: FontAwesome;
    font-size: 12px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}
.droppable:hover .mega-menu {display: block;}
/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {
  content: " "; /* 1 */
   display: table; /* 2 */
}
.cf:after {clear: both;}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  mysql8.0.23 linux (centos7) installation complete and detailed tutorial

>>:  The front end creates and modifies CAD graphics details through JavaScript

Recommend

Detailed explanation of efficient MySQL paging

Preface Usually, a "paging" strategy is...

How to install and configure mysql 5.7.19 under centos6.5

The detailed steps for installing mysql5.7.19 on ...

How does Vue solve the cross-domain problem of axios request front end

Table of contents Preface 1. Why do cross-domain ...

Examples of implementing progress bars and order progress bars using CSS

The preparation for the final exams in the past h...

JS calculates the probability of winning based on the prize weight

Table of contents 1. Example scenario 1.1. Set th...

Implementation of Docker deployment of MySQL cluster

Disadvantages of single-node database Large-scale...

CentOS7 firewall and port related commands introduction

Table of contents 1. Check the current status of ...

How to use vue-cli to create a project and package it with webpack

1. Prepare the environment (download nodejs and s...

Native JS to implement hover drop-down menu

JS implements a hover drop-down menu. This is a s...

Example of how to implement embedded table with vue+elementUI

During my internship in my senior year, I encount...

JavaScript modularity explained

Table of contents Preface: 1. Concept 2. The bene...

How to find the specified content of a large file in Linux

Think big and small, then redirect. Sometimes Lin...

Website Building Tutorial for Beginners: Learn to Build a Website in Ten Days

The 10-day tutorial uses the most understandable ...

Solution to interface deformation when setting frameset height

Currently I have made a project, the interface is ...