a:hover관련 질문입니다.!
본문
하면 할수록 모르는게 너무 많네용..ㅡㅜ
1.
#menu li a(1차메뉴[메인네비게이션]) 롤오버시 그림을
backgound:url(/SkinImg/case_img/subnav_01_01_over.gif)
위의 그림으로 바꾸고 싶은데 a:hover를 써도 안됩니다.
2.
#menu li ul li a (2차메뉴[서브네비게이션]) 롤오버시 그림을 바꾸고 싶은데 a:hover를 써도 안됩니다.
3
메인 네비게이션 클릭하면 서브네비게이션의 위치들이 제각각입니다.이를
메인네비게이션1번 클릭했을때의 서브네비게이션위치로 고정하고 싶은데 각각제각각입니다. 이를 어떻게 고정해야하나요,?
태그-------------------------------------------------------------------------------------------------
<style>
#menu {display:inline-block;width:219px;/* 메뉴의 너비 */}
#menu li {display:inline-block;width:219px;/* 1차메뉴 개수에 따라 %조절 */height:73px;/* 1차 메뉴바 높이 */float:left;}
#menu li ul {display:none;width:700px;/* 2차메뉴의 위치 - 1차메뉴 맨위에서 부터의 거리 */
postion:fixed; top:10px;left:10px;
}
#menu li ul li {display:inline-block;width:215px;height:212px;/* 2차메뉴의 높이 */padding:0;text-align:center;
padding-left:20px;float:left;
}
#menu img {border:0px none;}
#menu .side {padding:0;}
#menu .submenu {padding:5px 8px 0 8px;background:url(서브메뉴 배경) x-repeat; }
/* -------------------------------------------
각 서브메뉴의 위치
기준 : 1차 메뉴의 맨 앞에서 부터의 거리로 계산
#menu .submenu1 {margin-left:-100px;}
#menu .submenu2 {margin-left:-100px;}
#menu .submenu3 {margin-left:-100px;}
#menu .submenu4 {margin-left:-100px}
#menu .submenu5 {margin-left:-100px}
#menu .submenu6 {margin-left:-100px}
#menu .submenu7 {margin-left:-100px}
------------------------------------------- */
#menu .submenu1,#menu .submenu2,#menu .submenu3,#menu .submenu4,#menu .submenu5,#menu .submenu6,#menu .submenu7 {
margin-left:250px;
}
#top {padding-bottom:40px;}
</style>
<script language="javascript">
/* 만약 오픈 되어 있어야 하는 서브메뉴가 있을때 사용 */
//var old_menuid = 메뉴번호;
var old_viewid = 0;
function menu_view(viewid){
if(viewid!=old_viewid){
document.getElementById("submenu"+viewid).style.display="block";
if(old_viewid!="0")document.getElementById("submenu"+old_viewid).style.display="none";
old_viewid = viewid;
}
}
function menu_hide(hideid){
document.getElementById("submenu"+hideid).style.display="none";
old_viewid = 0;
}
</script>
<div id="top">
<p><img src="/SkinImg/case_img/top_img.jpg" alt="상단이미지"></p>
</div>
<div id="menu">
<ul>
<li onmouseover="javascript:menu_view(1);">
<a href="#" ><img src="/SkinImg/case_img/mainnav_01.gif" alt="점보롤화장지"></a>
<ul id="submenu1" class="submenu1" onmouseover="javascript:menu_view(1);" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_01_01.gif" alt="윈도즈점보롤화장지전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_01_02.gif" alt="인사이드점보롤화장지전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_01_03.gif" alt="인사이드점보롤화장지트윈전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(2);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_02.gif" alt="2번메뉴"></a>
<ul id="submenu2" class="submenu2" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_02_01.gif" alt="벌크팩트윈화장지"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_02_02.gif" alt="벌크팩싱글화장지"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(3);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_03.gif" alt="3번메뉴"></a>
<ul id="submenu3" class="submenu3" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_03_01.gif" alt="윈도즈핸드타올전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_03_02.gif" alt="윈도즈핸드타올(소형)전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_03_03.gif" alt="핸드타올수거전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(4);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_04.gif" alt="4번메뉴"></a>
<ul id="submenu4" class="submenu4" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_04_01.gif" alt="윈도즈써니패치롤핸드타올전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_04_02.gif" alt="윈도즈롤핸드타올레버컷팅전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_04_03.gif" alt="윈도즈슬림롤핸드타올수거전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(5);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_05.gif" alt="5번메뉴"></a>
<ul id="submenu5" class="submenu5" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_05_01.gif" alt="가즈맨변기세정제전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_05_02.gif" alt="윈도즈좌변기커버전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(6);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_06.gif" alt="6번메뉴"></a>
<ul id="submenu6" class="submenu6" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_01.gif" alt="윈도즈물비누500ml전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_02.gif" alt="킴케어럭셔리홈솝전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_03.gif" alt="킴케어스프레이폼솝전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_04.gif" alt="윈도즈물비누800ml전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(7);">
<a href="#"><img src="/SkinImg/case_img/mainnav_07.gif" alt="7번메뉴"></a>
<ul id="submenu7" class="submenu7" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_07_01.gif" alt="윈도즈와치맨방향제전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_07_02.gif" alt="킴케어셀방향제전용용기"></a></li>
</ul>
</li>
</ul>
</div>
---------------------------------------------------------------------------------------------------
답변 1
어... 저희집도 휴지공장하는데 ㅎㅎ
암튼 1,2번!
#menu li a{background:url("/SkinImg/case_img/mainnav_01.gif") 0 0 no-repeat;
#menu li a:hover{background:url("/SkinI,g/case_img/subnav_01_01_over.gif) 0 0 no-repeat;
메뉴(1) > li(2) > a(3) > img(4) 순서로 되어있으시죠.
태그는 차곡차곡 쌓이는거에요.
책으로보면 현재 img(4). 즉 4페이지를 보고 계시는데 3페이지의 글씨가 변했으니깐 안보이시는거에요.
3번!
메뉴 구성이 좀 이상하긴 하지만..... 해결할 방법은 있져.
ul에 submenu1,2,3이렇게 쭉있잖아요?
<ul id="submenu2" class="submenu2" > 이렇게요.
여기서 클래스를 하나 더 추가하세요.
<ul id="submenu2" class="submenu2 submenuWrap" >
이렇게 submenuWrap을 ul이면서 submenu숫자 인것들에 넣어주세요.
(원래는 이렇게 아이디 클래스값 막주시면 안되는데 이미 만들어두셨으니... 거기서 좀 추가해서 고치는 방법으로 갈께요...)
이렇게 해주시고 css로
.submenuWrap{position:absolute;top:200px;left:200px;)
이렇게 포지션 엡솔루트로 탑레프트 조절해서 위치 맞추시면되요.