navigation bar

링크를 사용한 리스트 메뉴	ex) html <ul>     <li><a href="/index.php">Home</a></li>     <li><a href="/html/intro">HTML</a></li>     <li><a href="/css/intro">CSS</a></li>     <li><a href="/javascript/intro">자바스크립트</a></li> </ul>
수직 내비게이션 바	ex) html <ul>     <li><a href="/index.php">Home</a></li>     <li><a class="current" href="/html/intro">HTML</a></li>     <li><a href="/css/intro">CSS</a></li>     <li><a href="/javascript/intro">자바스크립트</a></li> </ul>     ul { background-color: #FFDAB9; width: 150px; list-style type: none; margin: 0; padding: 0; }     li a { display: block; color: #000000; padding: 8px; text-decoration: none; font-weight: bold; }     li a:hover { background-color: #CD853F; color: white; } /li hover 시 칼라가 변함  +    li a.current { background-color: #FF6347; color: white; } /a.current 칼라 고정    li a:hover:not(.current) { background-color: #CD853F; color: white; } /a.current제외하고 hover시 칼라 변함,a.current 칼라 고정 +   ul {border: solid 1px black;} /ul, 테두리 생김   li { border-bottom: solid 1px black; }  /li 밑 테두리   li:last-child { border-bottom: none; }   /맨 아래 li 밑테두리 없애기
수평 내비게이션 바	display 속성의 inline 속성값을 이용한 방법 링크를 사용한 리스트 메뉴에서 <li>요소의 display 속성값을 inline으로 설정합니다. 그러면 블록 요소였던 <li>요소가 인라인 요소의 성질을 갖도록 변경됩니다. ex) html <ul>     <li><a href="/index.php">Home</a></li>     <li><a class="current" href="/html/intro">HTML</a></li>     <li><a href="/css/intro">CSS</a></li>     <li><a href="/javascript/intro">자바스크립트</a></li> </ul> ul{list-style-type: none;margin: 0;padding: 0;}  li { display: inline; } floating 속성을 이용한 방법 링크를 사용한 리스트 메뉴의 <li>요소에 float 속성을 설정합니다. ex) html <ul>     <li><a href="/index.php">Home</a></li>     <li><a class="current" href="/html/intro">HTML</a></li>     <li><a href="/css/intro">CSS</a></li>     <li><a href="/javascript/intro">자바스크립트</a></li> </ul> ul{list-style-type: none;margin: 0;padding: 0;} li{float: left;} li a { display: block; background-color: #FFDAB9; padding: 8px; } +     ul { background-color: #FFDAB9; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }     li { float: left; }     li a { display: block; background-color: #FFDAB9; color: #000000; padding: 8px; text-decoration: none;         text-align: center; font-weight: bold; }     li a:hover { background-color: #CD853F; color: white; }/ 하버시 칼라 변함 +     li a.current { background-color: #FF6347; color: white; }     li a:hover:not(.current) { background-color: #CD853F; color: white; } ex) <ul>     <li><a href="/index.php">Home</a></li>     <li><a href="/html/intro">HTML</a></li>     <li><a class="current" href="/css/intro">CSS</a></li>     <ul style="float:right; list-style-type:none;">         <li><a href="/bbs/login.php">로그인</a></li>         <li><a href="/bbs/register_form.php">회원가입</a></li>     </ul> </ul>  ul { background-color: #FFDAB9; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }  li { float: left; }  li a { display: block; background-color: #FFDAB9; color: #000000; padding: 8px; text-decoration: none;         text-align: center; font-weight: bold; }   li a.current { background-color: #FF6347; color: white; }   li a:hover:not(.current) { background-color: #CD853F; color: white; } /Home, HTML, CSS 메뉴는 왼쪽으로 정렬되며, 로그인, 회원가입 메뉴는 오른쪽으로 정렬됩니다. +     li { float: left; border-right: solid 1px white; }     li:last-child { border-right: none; } /border 속성을 이용하면 내비게이션 바에 경계선을 표현할 수 있습니다.

출처:tcpschool.com/css/css_advanced_navigation