심심해서 만들어본 간단한 롤오버 메뉴
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-size: 0.75em;
line-height: 1.5em;
font-family: Dotum, "돋움", sans-serif;
}
#navi {
width: 100%;
text-align: center;
background-color: #BBCCCC;
}
#navi a{ text-decoration: none; color: #78777C}
#navi a:hover {
position:relative;
z-index:10;
letter-spacing:0;
text-decoration: underline;
}
#navi span { width: 110px; line-height: 27px;
line-height:27px;
cursor:hand;
}
#navi ul li a span { width: 110px;}
#navi a:hover span { background-color: #A2BFBF;}
</style>
</head>
<body>
<div id="navi">
<span><a href=""><span id="naviLink">메뉴 1</span></a></span>
<span><a href=""><span id="naviLink">메뉴 1</span></a></span>
<span><a href=""><span id="naviLink">메뉴 1</span></a></span>
<span><a href=""><span id="naviLink">메뉴 1</span></a></span>
<span><a href=""><span id="naviLink">메뉴 1</span></a></span>
<span><a href=""><span id="naviLink">메뉴 1</span></a></span>
</div>
</body>
</html>
'DHTML' 카테고리의 다른 글
| [링크] 파비콘 만들어주는 사이트 (0) | 2008.09.19 |
|---|---|
| pre 태그 사용시 글이 길어서 테이블이 깨질경우... (0) | 2007.12.06 |
| [link] 실전 웹 표준 가이드 (0) | 2007.04.23 |
| [링크] dhtml grid control (0) | 2007.01.25 |
| Painless JavaScript Using Prototype (0) | 2007.01.19 |