서브메뉴 사라지는 이유 채택완료
메뉴를 만들어 두셨는데
예를들어 역량 대메뉴 > 보유기술 서브메뉴 페이지를 보고 있는데
소프트웨어 대메뉴에 마우스를 올리면 옆에 서브메뉴들이 나옵니다.
그런데 클릭하려고 하면 사라집니다..
absolut top으로 지정해둬서 마우스오버가 되는거라고 하는데 맞나요..?
그럼 해결방법이 무엇일까요..ㅠㅠ
head.php입니다.
Copy
style.css입니다.
Copy
#nav{}
#nav li {line-height: 60px; position: relative;}
#nav li + li {border-top: solid 1px #5e5e5e;}
#nav li a {color:#e4e4e4; text-transform: uppercase; font-size: 16px; padding: 0 15px; display: block;}
#nav li .sub_menu02 {display: none; border-top: 1px solid #b7b7b7; position: absolute; z-index: 99; width: 200px; z-index: 99;}
#nav li:nth-child(1) .sub_menu02 {top: 156px;}
#nav li:nth-child(2) .sub_menu02 {top: 216px;}
#nav li:nth-child(3) .sub_menu02 {top: 277px;}
#nav li:nth-child(4) .sub_menu02 {top: 338px;}
#nav li:nth-child(5) .sub_menu02 {top: 399px;}
#nav li:nth-child(6) .sub_menu02 {top: 460px;}
#nav .on .sub_menu02 {display: block;}
#nav li .sub_menu02 li {position: relative; border-top:none;}
#nav li .sub_menu02 li a {display: block; line-height: 45px; padding: 0 15px; color: #fff; border-bottom: 1px solid #b7b7b7; position: relative; font-size: 15px;}
#nav a[href*="co_id=privacy"] {
display: none !important;
}
@media (min-width: 1025px) {
#nav > li:hover > .sub_menu {width: 200px;}
#nav > li:hover > .sub_menu02 {display: block;}
.sub_menu {width: 0; position: fixed; top: 0; height: 100%; left: 240px;}
.on .sub_menu::before {background: url('/home/img/sub_menu.png') #a0a0a0 no-repeat center bottom; box-shadow: inset 2px -5px 5px rgba(0,0,0,0.2); width: 200px; height: 100vh; content: ''; display: block; position: relative; top: 0; z-index: -1;}
.main_header .sub_menu_bg {position: absolute; bottom: 0; z-index: 99;}
}
js입니다
Copy
$(function(){
AOS.init();
if($(".mobile-menu").css("display") == 'none'){
// PC메뉴
$lnb = $('.main_header');
$lnb_dep1 = $('#nav li');
$lnb_dep2 = $('#nav li .sub_menu');
$lnb_dep1.hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
});
$lnb.hover(function(){
$lnb_dep2.stop().show();
},function(){
$lnb_dep2.stop().hide();
});
};
답변 1개
채택된 답변
+20 포인트
4개월 전
Copy
#nav{position: relative;}
#nav li {line-height: 60px; }
#nav li + li {border-top: solid 1px #5e5e5e;}
#nav li a {color:#e4e4e4; text-transform: uppercase; font-size: 16px; padding: 0 15px; display: block;}
#nav li .sub_menu{display: none;}
#nav li .sub_menu02 { border-top: 1px solid #b7b7b7; position: absolute; z-index: 99; width: 200px; z-index: 99;}
#nav li:nth-child(1) .sub_menu02 {top: 0px;}
#nav li:nth-child(2) .sub_menu02 {top: 0px;}
#nav li:nth-child(3) .sub_menu02 {top: 0px;}
#nav li:nth-child(4) .sub_menu02 {top: 0px;}
#nav li:nth-child(5) .sub_menu02 {top: 0px;}
#nav li:nth-child(6) .sub_menu02 {top: 0px;}
#nav li .sub_menu02 li {position: relative; border-top:none;}
#nav li .sub_menu02 li a {display: block; line-height: 45px; padding: 0 15px; color: #fff; border-bottom: 1px solid #b7b7b7; position: relative; font-size: 15px;}
#nav a[href*="co_id=privacy"] {
display: none !important;
}
@media (min-width: 1025px) {
#nav > li:hover > .sub_menu {width: 200px;}
#nav > li:hover > .sub_menu02 {display: block; top: 0 !important;}
.sub_menu {width: 0; position: absolute; top: 0 !important; height: 100%; left: 240px; z-index: 9999;}
.on .sub_menu::before {background: url('/home/img/sub_menu.png') #a0a0a0 no-repeat center bottom; box-shadow: inset 2px -5px 5px rgba(0,0,0,0.2); width: 200px; height: 100vh; content: ''; display: block; position: fixed; top: 0; z-index: -1;}
.main_header .sub_menu_bg {position: absolute; bottom: 0; z-index: 99;}
}
$(function(){
AOS.init();
// 마우스 오버 시 서브 메뉴 보이기
if($(".mobile-menu").css("display") == 'none'){
$('#nav > li').hover(
function() {
let i = $(this).index();
$(this).addClass("on");
$(".submenu").hide();
$("#nav > li").eq(i).find(".sub_menu").show()
},
function() {
$(this).removeClass("on");
$(this).find(".sub_menu").hide()
}
);
}
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
s
sliverzero
4개월 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
sub_menu는 계속 보이게 되어야해서
sub_menu를 sub_menu02로 바꾸고 $(".submenu").hide();를 sub_menu02로 바꿨는데 안됩니다.. 무엇을 잘못한걸까요ㅠㅠ
--------------------------------
지피티로 해결했습니다. 답변주셔서 감사합니다!