| <!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일 목요일
드롭다운 메뉴
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기