NAV 태그와 CSS를 이용한 네비게이션 메뉴 만들기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

<style>
* { margin:0; padding:0; }
ul { line-style:none; }
nav { width:320px; height: 35px; background-color:#444; border-radius: 5px; margin:5px 0px 0px 0px; padding:0 0px 0px 0px; }
nav li { display:inline; }
nav li a { float: left; margin-right:5px; padding: 0px 20px; line-height:35px; }
nav li a:hover { color:#fff; }
nav ul ul { position:absolute; opt:25px; width:100px; border:1px solid #ccc; border-top:none; }
nav ul li:hover > ul { display: block; }
nav ul ul li a { width:100px; padding:10px 20px; line-height:1.4em; }
nav ul ul li a:hover { background: #444;}
a.nav_a { color:#33ccff; }
.clear { clear:both; }
</style>

<center>
<nav>
  <ul>
    <li><a href="/v3m/" class="nav_a">HOME</a></li>
    <li><a href="/bbs/board.php?bo_table=sub1_01" class="nav_a">회사소개</a></li>
        <ul>
            <li><a href="/bbs/board.php?bo_table=sub1_01" class="nav_a">인사말</a></li>
            <li><a href="/bbs/board.php?bo_table=sub1_02" class="nav_a">회사연혁</a></li>
            <li><a href="/bbs/board.php?bo_table=sub1_03" class="nav_a">비전</a></li>
            <li><a href="/bbs/board.php?bo_table=sub1_04" class="nav_a">CI/Bi</a></li>
            <li><a href="/v3m/sub1_05.php" class="nav_a">오시는길</a></li>
        </ul>
    <li><a href="/bbs/board.php?bo_table=sub1_01" class="nav_a">메뉴3</a></li>
  </ul>
</nav>
</center>


참고자료
http://www.designersol.co.kr/study/452