• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Navigation bar</title>
7
    <style>
8
        ul {
9
            background-color: #FFDAB9;
10
            list-style-type: none;
11
            margin: 0;
12
            padding: 0;
13
            overflow: hidden;
14
        }
15
        li { float: left; }
16
        li a {
17
            display: block;
18
            background-color: #FFDAB9;
19
            color: #000000;
20
            padding: 8px;
21
            text-decoration: none;
22
            text-align: center;
23
            font-weight: bold;
24
        }
25
        li a.current {
26
            background-color: #FF6347;
27
            color: white;
28
        }
29
        li a:hover:not(.current) {
30
            background-color: #CD853F;
31
            color: white;
32
        }
33
    </style>
34
</head>
35
​
36
<body>
37
​
38
    <h1>현재 메뉴의 위치 표시</h1>
39
    <ul>
40
        <li><a href="/index.php">Home</a></li>
41
        <li><a href="/html/intro">HTML</a></li>
42
        <li><a class="current" href="/css/intro">CSS</a></li>
43
        <li><a href="/bbs/login.php">로그인</a></li>
44
        <li><a href="/bbs/register_form.php">회원가입</a></li>
45
    </ul>
46
​
47
</body>
48
​
49
</html>