css实现三维折叠下拉菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:css实现三维折叠下拉菜单效果代码

代码标签: css 三维 折叠 下拉 菜单

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
    * {
  	margin: 0; 
		padding: 0;
		box-sizing: border-box;
	}

	body {
		padding: 30px; 
		font-family: "Helvetica Neue", helvetica, arial; 
		background: url('//repo.bfw.wiki/bfwrepo/image/62254197e677b.png');
	}

	#container {
		position: relative;
		width: 940px;		
	}

	#container:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
	}

	#menu {
		position: relative;
		float: left;
		width: 100%;
		padding: 0 20px;
		border-radius: 3px;
		box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
		background: #ccc; 
	}

	#menu, #menu ul {
		list-style: none;
	}

	#menu > li {
		float: left;
		position: relative;
		border-right: 1px .........完整代码请登录后点击上方下载按钮下载查看

网友评论0