• 코드:
​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 {
16
            float: left;
17
            border-right: solid 1px white;
18
        }
19
        li:last-child { border-right: none; }
20
        li a {
21
            display: block;
22
            background-color: #FFDAB9;
23
            color: #000000;
24
            padding: 8px;
25
            text-decoration: none;
26
            text-align: center;
27
            font-weight: bold;
28
        }
29
        li a.current {
30
            background-color: #FF6347;
31
            color: white;
32
        }
33
        li a:hover:not(.current) {
34
            background-color: #CD853F;
35
            color: white;
36
        }
37
    </style>
38
</head>
39
​
40
<body>
41
​
42
    <h1>메뉴 간 경계선 표현</h1>
43
    <ul>
44
        <li><a href="/index.php">Home</a></li>
45
        <li><a href="/html/intro">HTML</a></li>
46
        <li><a class="current" href="/css/intro">CSS</a></li>
47
        <ul style="float:right; list-style-type:none;">
48
            <li><a href="/bbs/login.php">로그인</a></li>
49
            <li><a href="/bbs/register_form.php">회원가입</a></li>
50
        </ul>
51
    </ul>
52
​
53
</body>
54
​
55
</html>