html css下拉菜单居中,CSS实现大型下拉菜单步骤详解

这次给大家带来CSS实现大型下拉菜单步骤详解，CSS实现大型下拉菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

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

HTML结构

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

• Home

• Category One

  Heading 1

• Category One Sublink
• Category One Sublink
• Category One Sublink
• Category One Sublink
• Category One Sublink

Heading 2

Category One Sublink Category One Sublink Category One Sublink Category One Sublink Category One Sublink

Heading 3

Category One Sublink Category One Sublink Category One Sublink Category One Sublink Category One Sublink

Heading 4

Category Two

Heading 1

Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink

Heading 2

Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink

Heading 3

Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink

Heading 4

Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink Category Two Sublink Category Three Category Four Category Five Category Six

CSS

为该大型菜单添加下面的CSS样式：/* #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;}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：