CSS Top Menu example
메인 메뉴에 마우스를 올리면 하위메뉴가 수직으로 나타나는 방식
스크린 샷
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>CSS를 이용한 메뉴 만들기</title>
<style type="text/css">
.navi
{
list-style-type:none;
height:40px;
padding:0;
margin:0;
}
.navi li
{
float:left;
position:relative;
padding:0;
line-height:40px;
background: #600;
}
.navi li a
{
display:block;
font-family: "굴림";
font-weight: 600;
font-size: 14px;
padding:5px 25px;
color:#fff;
text-decoration: none;
}
.navi li a:hover
{
color:#F90;
}
.navi li ul
{
opacity:0;
position:absolute;
left:0;
width:180px;
background:#D8AFAF;
list-style-type:none;
padding:0;
margin:0;
}
.navi li:hover ul
{
opacity:1;
}
.navi li ul li
{
float:none;
position:static;
height:0;
line-height:0;
background: none;
}
.navi li:hover ul li
{
height:30px;
line-height:30px;
padding:5px 0;
}
.navi li ul li a
{
background: #D8AFAF;
font-family: "굴림";
font-weight: 600;
font-size:14px;
color:#900;
}
.navi li ul li a:HOVER
{
background: #900;
}
/* Transition 효과를 위한 설정*/
.navi li { -webkit-transition:all 0.2s; }
.navi li a { -webkit-transition: all 0.5s; }
.navi li ul { -webkit-transition: all 1s; }
.navi li ul li { -webkit-transition: height 0.5s; }
.navi li { -moz-transition:all 0.2s; }
.navi li a { -moz-transition: all 0.5s; }
.navi li ul { -moz-transition: all 1s; }
.navi li ul li { -moz-transition: height 0.5s; }
</style>
</head>
<body>
<ul class="navi">
<li><a href="#">HOME</a></li>
<li><a href="#">GAME</a>
<ul>
<li><a href="#">보드게임</a></li>
<li><a href="#">슈팅게임</a></li>
<li><a href="#">시뮬레이션게임</a></li>
<li><a href="#">당구게임</a></li>
</ul>
</li>
<li><a href="#">게시판</a>
<ul>
<li><a href="#">Q & A</a></li>
<li><a href="#">방명록</a></li>
</ul>
</li>
<li><a href="#">프로필</a></li>
</ul>
</body>
</html>
하위메뉴가 메인메뉴 아래에 수평으로 나타나는 방식
스크린 샷
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>CSS를 이용한 메뉴 만들기</title>
<style type="text/css">
#menu
{
width:960px;
height:40px;
clear:both;
}
ul.navi
{
float:left;
width:960px;
margin:0;
padding:0;
list-style:none;
background:#39F;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
}
ul.navi li
{
display:inline;
}
ul.navi li a
{
float:left;
font:bold 14px 굴림;
line-height:40px;
color:#FFF;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin:0;
padding:0 30px;
background:#39F;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
}
ul.navi .current a, ul.navi li:hover > a
{
color:#fff;
text-decoration:none;
text-shadow: 1px 1px 1px #330000;
background:#36F;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
}
ul.navi ul
{
display:none;
}
ul.navi li:hover > ul
{
position:absolute;
display:block;
width:920px;
height:45px;
margin:40px 0 0 0;
background:#33F;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
ul.navi li:hover > ul li a
{
float:left;
font:bold 14px 굴림;
line-height:45px;
color:#FFF;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin:0;
padding:0 30px 0 0;
background: #33F;
}
ul.navi li:hover > ul li a:hover
{
color:#120000;
text-decoration: none;
text-shadow: none;
}
</style>
</head>
<body>
<div id="menu">
<ul class="navi">
<li><a href="#">HOME</a></li>
<li><a href="#">GAME</a>
<ul>
<li><a href="#">슈팅게임</a></li>
<li><a href="#">보드게임</a></li>
<li><a href="#">액션게임</a></li>
<li><a href="#">모바일게임</a></li>
</ul>
</li>
<li><a href="#">게시판</a>
<ul>
<li><a href="#">Q & A</a><li>
<li><a href="#">방명록</a><li>
</ul>
</li>
<li><a href="#">프로필</a></li>
</ul>
</div>
</body>
</html>