안녕하세요~
xe를 열심히 공부하고 있는 초보입니다^^
님의 레이아웃이 너무 너무 이뻐서
홈페이지에 적용하고 이것저것 만지고 있는데
한가지 무식한 질문좀 드리겠습니다..^^;;
메뉴를 만들면 위쪽에 메뉴가 나타나고
서브메뉴를 만들면 왼쪽에 메뉴가 생기면서 동시에
위쪽메뉴에 드롭메뉴가 보여지게 되는데요
왼쪽 서브메뉴는 그대로 나오게하고 드롭메뉴는 안나오게 하는 방법좀 가르쳐주세요(__)
여기저기 찾아보고 이것저것 다 해봤는데도 잘 안되네요..ㅠㅠ
꼭좀 부탁드리겠습니다.
스타일시트를 만져야할듯한데 잘 모르겠습니다.
부탁드립니다..제발 (__)
@charset "utf-8";
/* DRAWHOLIC (http://www.drawholic.com) */
/* Kim Jeong Bae(zzez@nate.com) */
/* Copyright(c) 2010 DRAWHOLIC. All Right Seserved. */
/* Reset */
body { margin:10px 0 0 0; text-align: center;
font-family:Tahoma, Sans-serif; font-size:.75em; background:#fff; color:#000;
background-image: url(../img/white_bg.jpg)undefined; background-repeat: repeat-x; } /* Layout Base */
#wrap { width: 878px; margin: 0 auto; text-align: left; }
#header { width: 878px; }
#visual { width: 878px; height:100px; clear:both; background-image:url(../img/visual.png)undefined; }
#visualsub { width: 878px; height:10px; clear:both; background-image:url(../img/visual.png)undefined; }
#pagehead { width: 878px; height:30px; clear:both; background-image:url(../img/pagehead.png)undefined; } #shwl { width: 9px; height:240px; float:left; background-image:url(../img/shwl.png)undefined; }
#shwr { width: 9px; height:240px; float:left; background-image:url(../img/shwr.png)undefined; } #subcontentwrap { width: 710px; float:left }
#content { width: 860px; padding:10px; float:left; background:#fff; }
#contentsub { width: 690px; padding:10px; float:left; background:#fff; border-top:4px solid #999; }
#submenuTitle { border-bottom: 10px solid #5c5c5c; margin: 0 -10px 0 0; padding: 10px 0 0 0; color: #fff; font-size: 16px; text-align: center; background: #555 url(../img/px1.png) repeat-x 0 -90px; }
#submenu { width: 141px; height: 240px; padding: 0; float:left; }
#submenu ol { width:150px; margin: 0; padding:0; float:left; list-style: none; }
#submenu li { position: relative; }
#submenu ul { width:150px; margin: 0; padding:0; clrar:both; list-style: none; } #submenu a { font-size:12px; color: #666; border-left: 5px solid #5c5c5c; border-top: 1px solid #5c5c5c; font-weight:900;
padding: 16px 0 6px 12px; display:block; text-decoration:none; }
#submenu a:hover { color: #333; border-left: 5px solid #999; background:#fff; } #submenu ul a { font-size:10px; color: #fff; padding: 6px 12px 6px 0 ; text-align:right; display:block; text-decoration:none; background: #333 url(../img/px1.png) repeat-x 0 -90px; border-left: 15px solid #5c5c5c; font-weight:100; }
#submenu ul a:hover { color: #333; solid #999; border-left: 15px solid #999; background:#ccc; background: #777 url(../img/px1.png) repeat-x 0 -90px; } .titanuim a:link {text-decoration: none; color: #999;}
.titanuim a:visited {text-decoration: none; color: #999;}
.titanuim a:active {text-decoration: none; color: #999;}
.titanuim a:hover {text-decoration: underline; color: #555;}
/* Header */
#logo { width: 718px; height: 80px; float:left; }
#headgnb { width: 160px; height:80px; float:right; }
#searchdiv { width: 160px; float:right; } .logo h1 {
margin:0;
padding:0;
} .langBar {
float:right;
position:relative;
padding:5px 0 0 0;
width:160px;
} .langTxt {
float:right;
color:#888;
font-size:11px;
font-family:'돋움', arial;
border-right:1px solid #888;
padding:0 7px 0 0;
margin:6px 7px 0 0;
} .langSelect {
float:right;
} .langSelect a {
background:url(../img/selectLang.gif) no-repeat left top;
width:90px;
height:24px;
display:block;
text-decoration:none;
font-size:0px;
} .langSelect a:hover {
background-position:left bottom;
} .langSelect a span {
visibility:hidden;
} .lang {
background:url(../img/langBg.gif) no-repeat;
position:absolute;
z-index:200;
margin:13px 0 0 0;
display:none;
left:70px;
top:8px;
_left:70px;
} .lang ul {
background:url(../img/langBottom.gif) no-repeat left bottom;
list-style:none;
position:relative;
z-index:200;
margin:0 0 -10px 0;
padding:10px 0 10px 0;
} .lang ul li {
position:relative;
z-index:200;
} .lang ul li a {
position:relative;
z-index:200;
background:none;
display:block;
font-size:11px;
color:#fff;
font-family:tahoma;
line-height:18px;
padding:0 0 0 8px;
width:82px;
height:20px;
border-bottom:1px solid #888;
} .lang ul a:hover {
background:#666;
display:block;
font-size:11px;
color:#ddd;
}
li.search {
list-style:none;
background:url(../img/searchbox.png) no-repeat;
float:right;
height:31px;
padding:8px 0 0 0;
position:relative; }
.searchBox {
width:160px;
height:25px;
padding:3px 0 0 0; }
.searchBox input {
border:none;
background-color:transparent;
margin:0 0 0 10px;
color:#ccc;
width:120px;
vertical-align:top; } .searchBox .submit {
border:none;
background:url(../img/searchbtn.gif) no-repeat;
width:20px; height:20px;
margin:0 0 0 0; }
/* GNB */
#gnbhome { width: 60px; padding:0; height:40px; float:left; }
#gnbmain { width: 648px; float:left; } #gnb { width: 878px; height:40px; clear:both; } #footergnb li { list-style:none; float:left;
border-right:1px solid #ccc;
font-weight:bold; font-family: arial, tahoma; color:#999;}
#footergnb li a { padding:10px 16px 0 16px; height:22px; display:inline-block; text-decoration:none !important; color:#999; }
#footergnb li a:hover { padding:10px 16px 0 16px; height:22px; color:#777; } #nav {
font-family: arial, tahoma;
margin: 0;
padding: 6px 8px 0 20px;
background: none url(img/px1.png) repeat-x;
line-height: 100%;
width: 628px;
} #nav li {
margin: 0 5px;
padding: 0 0 15px;
float: left;
position: relative;
list-style: none;
} /* main level link */
#nav a {
font-weight: bold;
color: #eee;
text-decoration: none;
display: block;
padding: 7px 20px;
margin: 0; -webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
}
#nav a:hover {
background: #000;
color: #fff;
} /* main level link hover */
#nav .current a, #nav li:hover > a {
background: #555 url(../img/px1.png) repeat-x 0 -40px;
color: #555; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #555;
-webkit-box-shadow: none;
-moz-box-shadow: none;
} #nav ul a:hover {
background: #aaa url(../img/px1.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
} /* dropdown */
#nav li:hover > ul {
display: block;
} /* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 160px;
position: absolute;
top: 32px;
left: 0;
background: #ccc url(../img/px1.png) repeat-x 0 0;
border: solid 1px #b4b4b4; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
} #nav ul li {
float: none;
margin: 0;
padding: 0;
border-top:solid 1px #fff;
border-bottom:solid 1px #ccc;
} #nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
} /* level 3+ list */
#nav ul ul {
left: 155px;
top: -2px;
} /* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
} /* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 0;
}
/* location */
.location {
width:705px; background:url(../img/locationHead.gif)undefined; float:left; padding:0 0 0 5px;
} .location ul {
margin:0;
padding:0;
list-style:none;
} .location ul li {
background:url(../img/locationArrow.gif) no-repeat left top;
float:left;
height:26px;
padding:0 15px 0 15px;
} .location ul li a {
font-size:10px;
color:#aaa;
font-weight:100;
text-decoration:none;
line-height:26px;
font-family:arial;
} .location ul li a:hover {
color:#999;
} .location ul li.home a {
background:url(../img/locationHome.gif) no-repeat left top;
display:block;
width:120px;
height:25px;
} .location ul li.home a:hover {
background-position:left bottom;
} .location ul li.home a span {
display:none;
} .loginwrap { float:left; }
/* Footer */ #footer { width: 100%; height:100px; clear:both; background-image:url(../img/bottom.gif)undefined; }
#address { width: 878px; margin: 7px auto; text-align: right; font-style:normal; font-family: arial, tahoma; color:#aaa; }
#footerlogo { margin: 10px 0 10px 10px; width:150px; height:80px; float:left; }
#footerwrap { width:718px; height:100px; float:left; }
#footergnb { height: 24px; float:right; }
#footerfamily { width:160px; height: 24px; float:right; }
#footertext { width:660px; padding:85px 0 0 18px; clear:both; font-family: tahoma; font-size:11px; color:#aaa; }
/* DRAWHOLIC (http://www.drawholic.com) */
/* Kim Jeong Bae(zzez@nate.com) */
/* Copyright(c) 2010 DRAWHOLIC. All Right Seserved. */
/* Reset */
body { margin:10px 0 0 0; text-align: center;
font-family:Tahoma, Sans-serif; font-size:.75em; background:#fff; color:#000;
background-image: url(../img/white_bg.jpg)undefined; background-repeat: repeat-x; } /* Layout Base */
#wrap { width: 878px; margin: 0 auto; text-align: left; }
#header { width: 878px; }
#visual { width: 878px; height:100px; clear:both; background-image:url(../img/visual.png)undefined; }
#visualsub { width: 878px; height:10px; clear:both; background-image:url(../img/visual.png)undefined; }
#pagehead { width: 878px; height:30px; clear:both; background-image:url(../img/pagehead.png)undefined; } #shwl { width: 9px; height:240px; float:left; background-image:url(../img/shwl.png)undefined; }
#shwr { width: 9px; height:240px; float:left; background-image:url(../img/shwr.png)undefined; } #subcontentwrap { width: 710px; float:left }
#content { width: 860px; padding:10px; float:left; background:#fff; }
#contentsub { width: 690px; padding:10px; float:left; background:#fff; border-top:4px solid #999; }
#submenuTitle { border-bottom: 10px solid #5c5c5c; margin: 0 -10px 0 0; padding: 10px 0 0 0; color: #fff; font-size: 16px; text-align: center; background: #555 url(../img/px1.png) repeat-x 0 -90px; }
#submenu { width: 141px; height: 240px; padding: 0; float:left; }
#submenu ol { width:150px; margin: 0; padding:0; float:left; list-style: none; }
#submenu li { position: relative; }
#submenu ul { width:150px; margin: 0; padding:0; clrar:both; list-style: none; } #submenu a { font-size:12px; color: #666; border-left: 5px solid #5c5c5c; border-top: 1px solid #5c5c5c; font-weight:900;
padding: 16px 0 6px 12px; display:block; text-decoration:none; }
#submenu a:hover { color: #333; border-left: 5px solid #999; background:#fff; } #submenu ul a { font-size:10px; color: #fff; padding: 6px 12px 6px 0 ; text-align:right; display:block; text-decoration:none; background: #333 url(../img/px1.png) repeat-x 0 -90px; border-left: 15px solid #5c5c5c; font-weight:100; }
#submenu ul a:hover { color: #333; solid #999; border-left: 15px solid #999; background:#ccc; background: #777 url(../img/px1.png) repeat-x 0 -90px; } .titanuim a:link {text-decoration: none; color: #999;}
.titanuim a:visited {text-decoration: none; color: #999;}
.titanuim a:active {text-decoration: none; color: #999;}
.titanuim a:hover {text-decoration: underline; color: #555;}
/* Header */
#logo { width: 718px; height: 80px; float:left; }
#headgnb { width: 160px; height:80px; float:right; }
#searchdiv { width: 160px; float:right; } .logo h1 {
margin:0;
padding:0;
} .langBar {
float:right;
position:relative;
padding:5px 0 0 0;
width:160px;
} .langTxt {
float:right;
color:#888;
font-size:11px;
font-family:'돋움', arial;
border-right:1px solid #888;
padding:0 7px 0 0;
margin:6px 7px 0 0;
} .langSelect {
float:right;
} .langSelect a {
background:url(../img/selectLang.gif) no-repeat left top;
width:90px;
height:24px;
display:block;
text-decoration:none;
font-size:0px;
} .langSelect a:hover {
background-position:left bottom;
} .langSelect a span {
visibility:hidden;
} .lang {
background:url(../img/langBg.gif) no-repeat;
position:absolute;
z-index:200;
margin:13px 0 0 0;
display:none;
left:70px;
top:8px;
_left:70px;
} .lang ul {
background:url(../img/langBottom.gif) no-repeat left bottom;
list-style:none;
position:relative;
z-index:200;
margin:0 0 -10px 0;
padding:10px 0 10px 0;
} .lang ul li {
position:relative;
z-index:200;
} .lang ul li a {
position:relative;
z-index:200;
background:none;
display:block;
font-size:11px;
color:#fff;
font-family:tahoma;
line-height:18px;
padding:0 0 0 8px;
width:82px;
height:20px;
border-bottom:1px solid #888;
} .lang ul a:hover {
background:#666;
display:block;
font-size:11px;
color:#ddd;
}
li.search {
list-style:none;
background:url(../img/searchbox.png) no-repeat;
float:right;
height:31px;
padding:8px 0 0 0;
position:relative; }
.searchBox {
width:160px;
height:25px;
padding:3px 0 0 0; }
.searchBox input {
border:none;
background-color:transparent;
margin:0 0 0 10px;
color:#ccc;
width:120px;
vertical-align:top; } .searchBox .submit {
border:none;
background:url(../img/searchbtn.gif) no-repeat;
width:20px; height:20px;
margin:0 0 0 0; }
/* GNB */
#gnbhome { width: 60px; padding:0; height:40px; float:left; }
#gnbmain { width: 648px; float:left; } #gnb { width: 878px; height:40px; clear:both; } #footergnb li { list-style:none; float:left;
border-right:1px solid #ccc;
font-weight:bold; font-family: arial, tahoma; color:#999;}
#footergnb li a { padding:10px 16px 0 16px; height:22px; display:inline-block; text-decoration:none !important; color:#999; }
#footergnb li a:hover { padding:10px 16px 0 16px; height:22px; color:#777; } #nav {
font-family: arial, tahoma;
margin: 0;
padding: 6px 8px 0 20px;
background: none url(img/px1.png) repeat-x;
line-height: 100%;
width: 628px;
} #nav li {
margin: 0 5px;
padding: 0 0 15px;
float: left;
position: relative;
list-style: none;
} /* main level link */
#nav a {
font-weight: bold;
color: #eee;
text-decoration: none;
display: block;
padding: 7px 20px;
margin: 0; -webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
}
#nav a:hover {
background: #000;
color: #fff;
} /* main level link hover */
#nav .current a, #nav li:hover > a {
background: #555 url(../img/px1.png) repeat-x 0 -40px;
color: #555; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #555;
-webkit-box-shadow: none;
-moz-box-shadow: none;
} #nav ul a:hover {
background: #aaa url(../img/px1.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
} /* dropdown */
#nav li:hover > ul {
display: block;
} /* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 160px;
position: absolute;
top: 32px;
left: 0;
background: #ccc url(../img/px1.png) repeat-x 0 0;
border: solid 1px #b4b4b4; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
} #nav ul li {
float: none;
margin: 0;
padding: 0;
border-top:solid 1px #fff;
border-bottom:solid 1px #ccc;
} #nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
} /* level 3+ list */
#nav ul ul {
left: 155px;
top: -2px;
} /* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
} /* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 0;
}
/* location */
.location {
width:705px; background:url(../img/locationHead.gif)undefined; float:left; padding:0 0 0 5px;
} .location ul {
margin:0;
padding:0;
list-style:none;
} .location ul li {
background:url(../img/locationArrow.gif) no-repeat left top;
float:left;
height:26px;
padding:0 15px 0 15px;
} .location ul li a {
font-size:10px;
color:#aaa;
font-weight:100;
text-decoration:none;
line-height:26px;
font-family:arial;
} .location ul li a:hover {
color:#999;
} .location ul li.home a {
background:url(../img/locationHome.gif) no-repeat left top;
display:block;
width:120px;
height:25px;
} .location ul li.home a:hover {
background-position:left bottom;
} .location ul li.home a span {
display:none;
} .loginwrap { float:left; }
/* Footer */ #footer { width: 100%; height:100px; clear:both; background-image:url(../img/bottom.gif)undefined; }
#address { width: 878px; margin: 7px auto; text-align: right; font-style:normal; font-family: arial, tahoma; color:#aaa; }
#footerlogo { margin: 10px 0 10px 10px; width:150px; height:80px; float:left; }
#footerwrap { width:718px; height:100px; float:left; }
#footergnb { height: 24px; float:right; }
#footerfamily { width:160px; height: 24px; float:right; }
#footertext { width:660px; padding:85px 0 0 18px; clear:both; font-family: tahoma; font-size:11px; color:#aaa; }