수다닷컴

페이지 인식관련해서 여쭈어 보려하는데요 ..
메뉴는 1단 메뉴입니다..
그런데 메뉴에 이미지를 백그라운드로 넣어둔 상황이고
1단메뉴가 2개 있는 상황입니다..
별개의 메뉴라서 다로 작성했는데 페이지 인식하는 법을 몰라서요 ㅠㅠ
아... 그리고 메뉴부분은 인크루드 할껍니다..
아시는분은 소스로좀 알려주실수 있을까요..?
js라든가 css로 하는방법이 있어서 다해봤는데 동시에 2개가 활성화 되지는 않더라구요 ㅠㅠ
참고사이트는 소셜커머스 쿠팡 에 있는 상단메뉴입니다...

일단 소스투척할께요.. HTML

!-- header START--
div id=header
h1 class=logoa href=../img src=../img/logo.png alt= //a/h1

!-- 상단메뉴 --
div class=gnb
ul class=menu
lia href=#span로그인/span/a/li
lia href=#span회원가입/span/a/li
lia href=#span마이페이지/span/a/li
lia href=#span고객센터/span/a/li
lia href=#spanem class=icon/em장바구니/span/a/li
/ul
/div
!-- //상단메뉴 --

!-- 검색창 --
div class=search
input type=text id=searchinput class=searchinputa href=#/a
/div
!-- //검색창 --

!-- 대메뉴 --
ul class=nva name=nv/a
li class=homea href=#spanHOME/span/a/li
li class=recipea href=../recipe/list.phpspanRECIPE/span/a/li
li class=noticea href=#spanNOTICE/span/a/li
li class=communitya href=#spanCOMMUNITY/span/a/li
li class=eventa href=#spanEVENT/span/a/li
/ul
!-- //대메뉴 --

!-- 소메뉴 --
ul class=snv
li class=s01a href=#spanBEST 30/span/a/li
li class=s02a href=#span쌀/잡곡/span/a/li
li class=s03a href=#span반찬/양념/span/a/li
li class=s04a href=#span농축수산물/span/a/li
li class=s05a href=#span가공식품/span/a/li
li class=s06a href=#span생활/주방/span/a/li
li class=s07a href=#span디지털/가전/span/a/li
li class=s08a href=#span패션잡화/span/a/li
li class=s09a href=#span선물세튼/span/a/li
/ul
!-- //소메뉴 --
/div
!-- //header END --

CSS

body {font-size:11px;}
#header {position:relative; width:984px; height:280px; overflow:hidden; margin:0 auto;}
#header .menu {position:relative;}
#header .logo {position:absolute; top:28px; left:2px; z-index:1;}
#header .gnb {position:absolute; right:0; top:20px;}
.gnb .menu {float:left; overflow}
.gnb .menu li {border-left:1px solid #000; float:left; display:block; font-size:11px; height:11px; margin-top:6px; line-height:12px;}
.gnb .menu li:first-child {border:none;}
.gnb .menu span {padding:0 9px;}
em.icon {display:inline-block; background:url(../../img/bg.png) -1px 0 no-repeat; vertical-align:top; height:18px; width:20px; margin-top:-6px;}

.search {position:absolute; top:75px; right:2px; width:219px; height:26px; display:inline-block; background:url(../../img/bg_search.png) no-repeat;}
.search .searchinput {border:0; color:#747474; font-size:11px; margin:6px 0 0 50px; background:none;}
.search a {display:block; float:right; width:26px; height:26px;}

/* 메인메뉴 */
.nv {position:relative; padding-top:126px; height:64px;}
.nv li {position:relative; float:left; height:64px; background:url(../../img/bg.png) no-repeat;}

.nv li.home {width:197px; background-position:0 -30px;}
.nv li.home:hover, .nv li.home .on {background-position:0 -94px;}

.nv li.recipe {width:198px; background-position:-197px -30px;}
.nv li.recipe:hover, .nv li.recipe .on {background-position:-197px -94px;}

.nv li.notice {width:196px; background-position:-395px -30px;}
.nv li.notice:hover, .nv li.notice .on {background-position:-395px -94px;}

.nv li.community {width:196px; backgro background-position:-591px -30px;}
.nv li.community:hover, .nv li.community .on {background-position:-591px -94px;}

.nv li.event {width:196px; background-position:-787px -30px;}
.nv li.event:hover, .nv li.event .on {background-position:-787px -94px;}

.snv {position:relative; height:90px; width:100%;}
.snv li {position:relative; float:left; width:97px; height:90px; padding-right:9px; background:url(../../img/bg.png) 0 -157px no-repeat;}
.snv li:first-child {padding-left:19px;}
.snv li:last-child {padding-right:20px;}
htmlbody .snv li.s09 {padding-right:20px;} /*ie7, ie8, ie9 hack */
.snv li a {width:100%; height:100%; margin:0 auto; display:block;}

.snv li.s01 {background-position:0 -157px;}
.snv li.s01:hover, .snv .s01.on {background-position:0 -247px;}

.snv li.s02 {background-position:-126px -157px;}
.snv li.s02:hover, .snv .s02.on {background-position:-126px -247px;}

.snv li.s03 {background-position:-232px -157px;}
.snv li.s03:hover, .snv .s03.on {background-position:-232px -247px;}

.snv li.s04 {background-position:-338px -157px;}
.snv li.s04:hover, .snv .s04.on {background-position:-338px -247px;}

.snv li.s05 {background-position:-444px -157px;}
.snv li.s05:hover, .snv .s05.on {background-position:-444px -247px;}

.snv li.s06 {background-position:-549px -157px;}
.snv li.s06:hover, .snv .s06.on {background-position:-549px -247px;}

.snv li.s07 {background-position:-655px -157px;}
.snv li.s07:hover, .snv .s07.on {background-position:-655px -247px;}

.snv li.s08 {background-position:-761px -157px;}
.snv li.s08:hover, .snv .s08.on {background-position:-761px -247px;}

.snv li.s09 {background-position:-867px -157px;}
.snv li.s09:hover, .snv .s09.on {background-position:-867px -247px;}

.nv li a, .snv li a {display:block; height:100%; text-indent:-9999em;}

신청하기