<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;
}
/* ------- MENU4 ------- */
#css_menu4{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
border-bottom: 1px solid silver;
}
#css_menu4 div{
float: left;
}
#css_menu4 div a{
border-top: 5px solid silver;
float: left;
color: black;
padding: 10px;
text-decoration: none;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu4 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:hover.green{
border-top: 5px solid green;
}
#css_menu4 div a:active.green{
border-top: 5px solid green;
}
#css_menu4 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu4 div a:active.navy{
border-top: 5px solid #004080;
}
/* ------- MENU5 ------- */
#css_menu5{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
}
#css_menu5 div{
float: left;
}
#css_menu5 div 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_menu5 div 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_menu5 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu5 div a:hover.green{
border-top: 5px solid green;
}
#css_menu5 div a:active.green{
border-top: 5px solid green;
}
#css_menu5 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu5 div 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>
<div id="css_menu4">
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
<br><br>
<div id="css_menu5">
<div><a></a></div>
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
/* ------- 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;
}
/* ------- MENU4 ------- */
#css_menu4{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
border-bottom: 1px solid silver;
}
#css_menu4 div{
float: left;
}
#css_menu4 div a{
border-top: 5px solid silver;
float: left;
color: black;
padding: 10px;
text-decoration: none;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu4 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:hover.green{
border-top: 5px solid green;
}
#css_menu4 div a:active.green{
border-top: 5px solid green;
}
#css_menu4 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu4 div a:active.navy{
border-top: 5px solid #004080;
}
/* ------- MENU5 ------- */
#css_menu5{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
}
#css_menu5 div{
float: left;
}
#css_menu5 div 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_menu5 div 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_menu5 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu5 div a:hover.green{
border-top: 5px solid green;
}
#css_menu5 div a:active.green{
border-top: 5px solid green;
}
#css_menu5 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu5 div 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>
<div id="css_menu4">
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
<br><br>
<div id="css_menu5">
<div><a></a></div>
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
반응형
'인터넷정보' 카테고리의 다른 글
홈페이지 제작시 사용되는 스타일시트(CSS) 정리 (0) | 2007.10.17 |
---|---|
홈페이지 제작시 사용되는 스타일시트(CSS) 정리 (0) | 2007.10.17 |
내컴퓨터에 설치된 플래시 버젼 확인하기 (0) | 2007.10.17 |
내컴퓨터에 설치된 플래시 버젼 확인하기 (0) | 2007.10.17 |
css로 만든 메뉴입니다. (0) | 2007.10.17 |
셀렉트박스(SelectBox) 마우스오버시 크기 늘리기 (0) | 2007.10.17 |
셀렉트박스(SelectBox) 마우스오버시 크기 늘리기 (0) | 2007.10.17 |
이미지 없는 라운드테이블 만들기 (0) | 2007.10.17 |
이미지 없는 라운드테이블 만들기 (0) | 2007.10.17 |
입력폼 대문자만 적용하기 (0) | 2007.10.17 |