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
Preface This article summarizes some common MySQL...
Problem background: When using docker to deploy t...
You may have noticed that the src or CSS backgroun...
1. Filter Example: <!DOCTYPE html> <html...
For example: <link rel="stylesheet" h...
Getting Started with Data Volumes In the previous...
Last year, the open letter was a huge hit, even a...
Effective solution for Ubuntu in virtual machine ...
There are many reasons why an application is as s...
When a website is maliciously requested, blacklis...
Requirement: Sometimes, when the page content is ...
(1) Each HTML tag has an attribute style, which c...
This article shares the detailed steps of install...
Table of contents Transaction Isolation Level Pro...
Table of contents Preface 1. Style penetration 1....