<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style>
ul.menu{
padding:0px;
margin:0px;
margin:auto;
width:660px;
}
ul.menu li{
list-style: none;
width:100px;
padding:15px;
float:left;
}
ul.menu li:nth-of-type(even){
background-color:yellow;
}
ul.menu li:nth-of-type(odd){
background-color:darkolivegreen;
color:white;
}
ul.menu li>div{
position:relative;
top:0px;
left:0px;
width:0px;
height:0px;
}
ul.menu li>div>div{
position:absolute;
top:15px;
left:-15px;
width:200px;
height:300px;
background-color:darkorange;
clip:rect(0px,0px,0px,0px);
transition:clip 0.3s;
}
ul.menu li:hover>div>div{
clip:rect(0px,200px,300px,0px);
}
</style>
</head>
<body>
<ul class="menu">
<li>One<div><div>Sub-menu</div></div></li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
'Random Thoughts > Coding Tips' 카테고리의 다른 글
CSS로 선택된 부분의 색깔을 변하지 않게 해보자. (0) | 2015.12.18 |
---|---|
마우스를 피하는 물체를 만들어보자! (0) | 2014.02.04 |