aurthur/dabblet.css

## dabblet.css
/**
 * css3中hover的运用，应用于下拉菜单，slide
 */
li{
list-style-type:none;
border-radius:4px ;
box-shadow:0 0 3px gray;
margin:10px 10px;
width:200px;
height:80px;
text-align:center;
transition:background 0.8s ease-out 0.1s;
}
div{
color:#aaa;
}
li:hover a{
color:#eee
}
li:nth-child(1):hover{
background:green;
}
li:nth-child(2):hover{
background:yellow;
}
li:nth-child(3):hover{
background:blue;
}
li:nth-child(4):hover{
background:gray;
}
li span{

width:300px;
height:350px;
display:block;
position:absolute;
top:20px;
left:780px;
z-index:1;
border-radius:4px ;

opacity:0;
transition:all 1s ease-in-out;
}
li:nth-child(1):hover span{
opacity:1;
background:green;
top:18px;
left:200px;
}
li:nth-child(2):hover span{
opacity:1;
background:yellow;
top:18px;
left:200px;
}
li:nth-child(3):hover span{
opacity:1;
background:blue;
top:18px;
left:200px;
}
li:nth-child(4):hover span{
opacity:1;
background:gray;
top:18px;
left:200px;
}


## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<ul>
	<li>
		<a>AAAA</a>
		<div>aaaa</div>
		<span></span>
	</li>
	<li>
		<a>DDDD</a>
		<div>dddd</div>
		<span></span>
	</li>
	<li>
		<a>BBBB</a>
		<div>bbbb</div>
		<span></span>
	</li>
	<li>
		<a>CCCC</a>
		<div>cccc</div>
		<span></span>
	</li>

</ul>

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* css3中hover的运用，应用于下拉菜单，slide
	*/
	li{
	list-style-type:none;
	border-radius:4px ;
	box-shadow:0 0 3px gray;
	margin:10px 10px;
	width:200px;
	height:80px;
	text-align:center;
	transition:background 0.8s ease-out 0.1s;
	}
	div{
	color:#aaa;
	}
	li:hover a{
	color:#eee
	}
	li:nth-child(1):hover{
	background:green;
	}
	li:nth-child(2):hover{
	background:yellow;
	}
	li:nth-child(3):hover{
	background:blue;
	}
	li:nth-child(4):hover{
	background:gray;
	}
	li span{

	width:300px;
	height:350px;
	display:block;
	position:absolute;
	top:20px;
	left:780px;
	z-index:1;
	border-radius:4px ;

	opacity:0;
	transition:all 1s ease-in-out;
	}
	li:nth-child(1):hover span{
	opacity:1;
	background:green;
	top:18px;
	left:200px;
	}
	li:nth-child(2):hover span{
	opacity:1;
	background:yellow;
	top:18px;
	left:200px;
	}
	li:nth-child(3):hover span{
	opacity:1;
	background:blue;
	top:18px;
	left:200px;
	}
	li:nth-child(4):hover span{
	opacity:1;
	background:gray;
	top:18px;
	left:200px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<ul>
	<li>
	<a>AAAA</a>
	<div>aaaa</div>
	<span></span>
	</li>
	<li>
	<a>DDDD</a>
	<div>dddd</div>
	<span></span>
	</li>
	<li>
	<a>BBBB</a>
	<div>bbbb</div>
	<span></span>
	</li>
	<li>
	<a>CCCC</a>
	<div>cccc</div>
	<span></span>
	</li>

	</ul>