<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
body{background:#ddd;}
/* 슬라이드 메뉴 스타일 */
.slide_bt{width:30px;height:30px;background:black;position:absolute;top:20px;right:10px;cursor:pointer;transition:.5s;}
input[type=checkbox]{display:none;}
.slide_sample {width:200px;height:100%;position:fixed;top:0px;right:-200px;background:#aaa;transition:.5s;}
input.menuchk:checked ~ .slide_sample{right:0;transition:.5s;}
input.menuchk:checked ~ .slide_bt{right:210px;transition:.5s;}
/* 드롭박스 스타일 */
.menu_wrap{claer:both; position:relative;margin:0 auto;}
.menu_wrap ul{list-style-type:none;margin:0;padding:0;}
.menu_wrap .menu_index{width:100px;border:1px solid #fff;color:white;font-size:20px;text-align:center;background:black; float:left;}
.menu_wrap .item:hover{text-shadow: 0 0 1px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}
.menu_wrap .menu_index:hover .menu_content{ display:block; }
.menu_wrap .menu_index .menu_content {claer:both; display:none; background:#0CF;}
</style>
<script>
</script>
</head>
<body>
<div class="menu_wrap">
<ul>
<li class="menu_index">
<a class="item">AAAA</a>
<div class="menu_content">
<ul>
<li>가</li>
<li>나</li>
<li>다</li>
<li>라</li>
</ul>
</div>
</li>
<li class="menu_index">BBBB</li>
<li class="menu_index">CCCC</li>
</ul>
</div>
<input name="menu_" id="menu_chk" type="checkbox" class="menuchk">
<label for="menu_chk" class="slide_bt"></label>
<div class="slide_sample">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
'HTML&CSS' 카테고리의 다른 글
| #2 HTML 문서의 구조 (0) | 2024.08.25 |
|---|---|
| #1 HTML 이란 (0) | 2024.08.24 |
| ul li 가운데 정렬 (0) | 2016.05.24 |
| audio 태그 다음곡 연속재생 (2) | 2016.05.11 |
| HTML form테그 post 방식 한글깨짐 방지 (0) | 2016.04.12 |
| 문서모드 <meta http-equiv="X-UA-Compatible" content = "IE=7"/> (0) | 2016.03.17 |
| HTML DIV 태그 position (0) | 2016.03.17 |
| 크롬 Chrome 에서 CSS (text-align="center") 잘 안먹을 때 (0) | 2016.03.17 |