Html
    Css
    Js
 /* 下拉菜单 */
 #navmenu {
	width:1160px;
	height:32px;
	background:#333;
	position:relative;
	z-index:99;
	margin:30px auto;
}
#navmenu .menuhome {
	margin-left:16px
}
#navmenu li {
	position:relative;
	display:block;
	float:left;
	cursor:pointer
}
#navmenu .tablink {
	position:relative;
	padding:1px 15px;
	line-height:31px;
	display:block;
	height:31px;
	color:#fff;
	font-size:14px;
	z-index:99;
	float:left
}
#navmenu .tablink a {
	line-height:30px;
	color:#FFF;
	text-decoration:none
}
#navmenu li:hover {
	background:#FFF
}
#navmenu li:hover .tablink {
	color:#357d13;
	border:1px solid #629d2a;
	border-bottom:0;
	padding:0 15px;
	text-decoration:none
}
#navmenu li:hover .tablink a {
	color:#357d13
}
#navmenu .dropdown div {
	display:none
}
#navmenu .dropdown:hover div {
	position:absolute;
	display:block;
	margin-left:-1px;
	top:32px;
	left:1px;
	z-index:9
}
#navmenu .subnav {
	width:120px
}
#navmenu .subnav a {
	padding:4px 0 4px 15px;
	line-height:16px;
	width:70px;
	display:block;
	white-space:nowrap;
	color:#333;
	float:left
}
#navmenu .subnav:hover {
	text-decoration:underline;
	color:#080
}
#navmenu .subnav {
	background:#FFF;
	border:1px solid #390;
	border-top:0;
	padding:8px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯CSS下拉菜单

这是一款最简单的下拉菜单,只用到了html+css,没有特殊的效果,本着实用好用够用的原则制作,兼容火狐、谷歌、ie7+等所有主流浏览器。

0