코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS Navigation bar</title> <style> 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; } </style> </head> <body> <h1>현재 메뉴의 위치 표시</h1> <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> <li><a href="/bbs/login.php">로그인</a></li> <li><a href="/bbs/register_form.php">회원가입</a></li> </ul> </body> </html>