정치 사회: 2014-08-10

2014년 8월 14일 목요일

드롭다운 메뉴

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>드롭다운 메뉴</title>
	<style>
	#nav {
	list-style-type: none;
	margin: 0;
	background:#7d7d7d;
	position:relative;
	display:inline-block;
	}
	#nav li {
	float: left;
	position: relative;
	margin:0 10px;
	padding: 0;
	}
	#nav li > a {
	display: block;
	font-family:"굴림";
	font-weight:600;
	font-size:1em;
	padding:10px 20px;
	color: #e7e5e5;
	text-decoration: none;
	margin:0;
	}
	#nav li:hover {
	background:#ebebeb;
	}
	#nav li:hover a {
	color:#444;
	}

	#nav ul{
	margin:0;
	padding:0;
	list-style:none;
	position: absolute;
	left: 0;
	top:38px;
	width: 150px;
	background:#ddd;
	border:1px solid #b4b4b4;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);
	-moz-box-shadow:0 1px 3px rgba(0,0,0,.3);
	box-shadow:0 1px 3px rgba(0,0,0,.3);
	display:none;
	}

	#nav li:hover > ul {
	display:block;
	}
	#nav li:hover > ul li {
	float:none;
	display:block;
	}
	#nav ul li {
	float: none;
	margin:0;
	padding:0;
	}
	#nav ul li a {
	font-weight:normal;
	text-shadow:0 1px 0 #fff;
	color:#333;
	}
	#nav ul li:hover > a {
	background:#0078ff;
	color:#fff;
	text-shadow:0 1px 1px rgba(0,0,0,0.1);
	border-radius:0;
	}

	</style>
	</head>

	<body>
	<ul id="nav">
	<li><a href="#"> 처음으로 </a></li>
	<li><a href="#"> 요안도라 안내 </a>
	<ul>
	<li><a href="#">소개합니다.</a></li>
	<li><a href="#">오시는 길</a></li>
	</ul>
	</li>
	<li><a href="#"> 이용 방법</a>
	<ul>
	<li><a href="#"> 객실 둘러보기</a></li>
	<li><a href="#"> 요금 안내 </a></li>
	<li><a href="#"> 예약 방법 </a></li>
	<li><a href="#"> 예약 게시판</a></li>
	</ul>
	</li>
	<li><a href="#"> 게시판 </a>
	<ul>
	<li><a href="#"> 공지사항 </a></li>
	<li><a href="#"> 묻고 답하고</a></li>
	</ul>
	</li>
	<li><a href="#"> 프로필</a></li>
	</ul>

	</body>
	</html>

페이지 메뉴

2014년 8월 14일 목요일

드롭다운 메뉴