纯div css二级下拉菜单样式模板
2015-02-16 11:31:32  By: dwtedx

• dwtedx
• CSS3教程
• 0
• 1379
• 0

一直以来、大家都知道下拉菜单都是利用JS控制HTML标签来达到下拉菜单的效果、但这样的话、在搜索引擎的快照页面就不会显示二级菜单、如果直接使用css来做菜单的话、在搜索引擎的快照页面就会显示二级菜单、大家可以看下我的博客的菜单、就是使用纯css实现的、在快照页可以正常显示功能菜单、其实、下拉菜单的原理并不难、就是利用CSS的overflow属性和height、以及hover（伪类）、三者相互配合、首先将父菜单和子菜单全部排版出来（父菜单和所有的子菜单在同一个<li>标签里面、实际应用中父菜单不可能只有一个、列表排版比较多）、下面是一个简单的css菜单代码

a {
	color: #fff;
}
a:hover {
	color: #3d61a2;
	text-decoration: none;
}
.demo {
	margin-top: 40px;
	min-height: 300px;
}
.page-menu-wrapper {
	width: 960px;
	line-height: 45px;
	margin: 0 auto;
	background-color: #446cb3;
}
.page-menu-wrapper > ul > li {
	position: relative;
	float: left;
	border-left: 1px solid #3d61a2;
	border-right: 1px solid #3d61a2;
	margin-right: -1px;
}
.menu-function {
	float: left;
}
.menu-share {
	float: right;
}
.page-menu-wrapper > .menu-function > li:first-child {
	border-left: none;
}
.page-menu-wrapper > .menu-share > li:last-child {
	border-right: none;
}
.page-menu-wrapper a {
	position: relative;
	display: block;
	padding: 0 15px;
	transition: all .3s ease-out;
}
.page-menu-wrapper > ul > li:hover > a {
	color: #3d61a2;
	background-color: #fff;
}
.page-menu-wrapper > ul > li:hover .dropdown-menu {
	display: block;
}
.dropdown-menu {
	display: none;
	position: absolute;
	width: 260px;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	background-color: #fff;
}
.dropdown-menu.categories a {
	color: #000;
}
.dropdown-menu.categories a:hover {
	color: #5bc4be;
	margin-left: 10px;
}
#search:target a[href="#search"] {
	display: none;
}
#search:target ~ #search-hidden {
	display: block;
}
#search-hidden {
	display: none;
	padding: 0 5px;
	background-color: #fff;
}

HTML代码

<ul class="menu-function">
	<li>
		<a href="" title="">CATEGORIES</a>
		<ul class="dropdown-menu categories">
			<li><a href="" title="">Design</a></li>
			<li><a href="" title="">Freebies</a></li>
			<li><a href="" title="">Tutorials</a></li>
			<li><a href="" title="">Coding</a></li>
			<li><a href="" title="">Inspiration</a></li>
			<li><a href="" title="">WordPress</a></li>
			<li><a href="" title="">Resources</a></li>
		</ul>
	</li>
	<li><a href="" title="">SHOP</a></li>
	<li id="search">
		<a href="#search" title="">SEARCH</a>
	</li>	
</ul>

最后贴上纯css实现的二级和多级菜单Demo的源代码、大家可以参考一下、修改修改也可以融入到自己的项目中

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjwk6KX 密码: el8u

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛