介绍 & lt; nav>
& lt; ul类=叭萜鱱l-reset"祝辞
& lt; li> & lt; a href=https://www.yisu.com/zixun/' # '> 回家
<李类='可以滴落的>
类别>/* #重置
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */html {box-sizing: border-box;}
后* * *:前:{box-sizing:继承;}/* #环球和默认样式
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */身体{
背景:url (. ./img/black-wood-small.jpg);
颜色:# ddd;
无衬线字体类型:“开放Sans";
字体大小:14 px;
行高:1;
保证金:0;
填充:0;
text-align:中心;
}
一个{文字修饰:没有;}
h2 {
字体大小:40像素;
粗细:700;
margin-bottom: 20 px;
margin-top: 20 px;
}
h3 {
字体大小:15 px;
粗细:600;
margin-bottom: 30 px;
margin-top: 10 px;
}
.container {
保证金:汽车;
宽度:940 px;
}
.ul-reset {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style:没有;
}/* #导航样式
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */nav {
背景:# 424242;
字体大小:0;
位置:相对;
}
资产净值比;ul祝辞李{
显示:inline-block;
字体大小:14 px;
填充:15 0 px;
位置:相对;
}
资产净值比;ul祝辞李:第一个孩子{padding-left: 0;}
资产净值比;ul祝辞李:胎{padding-right: 0;}
资产净值比;ul祝辞李比;一个{
颜色:# fff;
显示:块;
位置:相对;
填充:20 px 0;
边界底部:3 px固体透明;
}
资产净值比;ul祝辞李:徘徊在一个{
颜色:# 69 aae0;
边界底部:3 px固体# 69 aae0;
}/* #超级菜单风格
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */.mega-menu {
背景:# f0f0f0;
显示:没有;
左:0;
位置:绝对的;
text-align:左;
宽度:100%;
}
.mega-menu h4{颜色:# 444;}
.mega-menu ul {
浮:左;
margin-bottom: 20 px;
margin-right: 40像素;
宽度:205 px;
}
.mega-menu ul:胎{margin-right: 0;}
.mega-menu一个{
边界底部:1 px固体# ddd;
颜色:# 4 ea3d8;
显示:块;
填充:10 px 0;
}
.mega-menu答:悬停{颜色:# 2 d6a91;}/* #可以滴落的类风格
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */.droppable{:静态;}
.droppable祝辞{后
内容:“\ f107";
字体类型:FontAwesome;
字体大小:12 px;
padding-left: 6 px;
位置:相对;
上图:1 px;
}
.droppable:悬停.mega-menu{显示:块;}/* #浏览器Clearfix
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */.cf:之前,
.cf:{后
内容:““;/* 1 */显示:表;/* 2 */}
.cf:{明确:;}
这篇文章将为大家详细讲解有关CSS如何实现大型下拉菜单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作,没有任何js代码,不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。
<强> HTML结构
该大型菜单的HTML结构如下:
