How to use CSS to implement a large drop-down menu

Drop-down menu can be used in many Web pages, this article mainly introduces the implementation of the pure CSS large drop-down menu sample code of the relevant information, the content is very good, and now share to everyone, but also for everyone to do a reference.

This is a pure CSS implementation of a large drop-down menu. This large menu is made with HTML and pure CSS code, without any JS code, and does not depend on any third-party plugins. Suitable for use in large-scale websites with more column categories.

HTML structure

The HTML structure for this large menu is as follows:

<nav> <ul class= "Container ul-reset" > <li><a href= ' # ' >Home</a></li> <li clas s= ' droppable ' > <a href= ' # ' >category one</a> <p class= ' mega-menu ' > <p class= "conta Iner CF "> <ul class=" ul-reset "> 
Css

Add the following CSS style to the large 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 &Gt 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 whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!