navi

by rootjang

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
  .container {
    width: 960px;
    margin : 0 auto;
    background-color:#fff;
    border:1px solid #E7E7E7
  }
  header {
    height: 280px;
    margin: 0;
    background-image: url(images/header-bg.png);
    background-repeat: no-repeat;
    background-position: left top;
  }
  .navi{
    background:#031a44;
		margin-top:-17px;
    width:960px;
    height:60px;
  }

  .navi ul{
    list-style: none;
    height:40px;
    padding-top:10px;
    padding-bottom:5px;
  }
  .navi ul li {
    display:inline;
    float:left;
  }
  .navi a:link, .navi a:visited {
    padding: 10px 5px 5px 35px;
    display: block;
    color:#fff;             /* 글자색 흰색 */
    width: 150px;           /* 너비 150px */
    text-decoration: none;  /* 밑줄 없음 */

  }
  .navi a:hover,  .navi a:focus {
    text-shadow:0px 2px 2px #000;   /* 글자에 검은색 그림자 */
    color:#FC0;   /* 글자가 노랑 계열로 */
  }

  .navi a:active {
    color:red;    /* 글자색이 빨강으로 */
  }
</style>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
</head>

<body>
<div class="container">
  <header>  </header>  
    <nav class="navi">
      <ul>
        <li><a href="#">이용 안내</a></li>
        <li><a href="#">객실 소개</a></li>
        <li><a href="#">예약 방법 및 요금</a></li>
        <li><a href="#">예약하기</a></li>
      </ul>
    </nav>  
  </div>
</body>
</html>