css 로 만든 메뉴 > html

<style type="text/css">
/* ------- MENU1  ------- */
#css_menu1{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}

#css_menu1 li{
display: inline;
}

#css_menu1 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 4px solid gray;
border-bottom: 1px solid silver;
}

#css_menu1 li a:hover{
border-top: 4px solid deeppink;
color: red;
background-color:#ffeef7;
padding: 10px;
}

/* ------- MENU2  ------- */
#css_menu2{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}

#css_menu2 li{
display: inline;
}

#css_menu2 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}

#css_menu2 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}

#css_menu2 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}

/* ------- MENU3  ------- */
#css_menu3{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}

#css_menu3 li{
display: inline;
}

#css_menu3 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 5px solid silver;
border-bottom: 1px solid silver;
selector-dummy : expression(this.hideFocus=true);
}

#css_menu3 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}

#css_menu3 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}

#css_menu3 li a:hover.green{
border-top: 5px solid green;
}

#css_menu3 li a:active.green{
border-top: 5px solid green;
}

#css_menu3 li a:hover.blue{
border-top: 5px solid #0080c0;
}

#css_menu3 li a:active.blue{
border-top: 5px solid #0080c0;
}

#css_menu3 li a:hover.brown{
border-top: 5px solid #ff8000;
}

#css_menu3 li a:active.brown{
border-top: 5px solid #ff8000;
}

#css_menu3 li a:hover.purple{
border-top: 5px solid #7257B1;
}

#css_menu3 li a:active.purple{
border-top: 5px solid #7257B1;
}

#css_menu3 li a:hover.navy{
border-top: 5px solid #004080;
}

#css_menu3 li a:active.navy{
border-top: 5px solid #004080;
}

</style>

<ul id="css_menu1">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>

<ul id="css_menu2">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>

<ul id="css_menu3">
<li><a href="#" class="blue">자유게시판</a></li>
<li><a href="#" class="brown">질문&답변</a></li>
<li><a href="#" class="purple">알짜게시판</a></li>
<li><a href="#" class="navy">메시지박스</a></li>
<li><a href="#" class="green">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>


출처 : 미니위니