인프런 커뮤니티 질문&답변
작성한 질문수
d,e유형 네비게이션 제작시 서브메뉴가 고정이 안됩니다
해결된 질문
작성
·
202
·
수정됨
1
강의 de유형 네비게이션 7:55분초를 보면 선생님 서브메뉴는 고정되어서 잘 나오는데 제꺼는 고정이 안되고 자꾸 슬라이드 업 되어서 서브메뉴에 호버를 할수가 없습니다
제생각에는 엡솔루트 준 뒤로 이러는것 같은데..ㅠ
코드올려드립니다 왜이러는걸까요 ㅠㅜ
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>D-1</title>
</head>
<link rel="stylesheet" href="./css/style.css" />
<body>
<div class="container">
<div class="main-content">
<div class="left">
<div class="header">
<div class="header-logo"></div>
<div class="menu">
<ul class="menu1">
<li>
<a href="#none"> meun-1</a>
<div class="sub-menu">
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
</div>
</li>
<li>
<a href="#none"> meun-1</a>
<div class="sub-menu">
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
</div>
</li>
<li>
<a href="#none"> meun-1</a>
<div class="sub-menu">
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
</div>
</li>
<li>
<a href="#none"> meun-1</a>
<div class="sub-menu">
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
<a href="#none">meun-2</a>
</div>
</li>
</ul>
</div>
<div class="spot-menu"></div>
</div>
</div>
<div class="right">
<div class="slide">
<div class="slide-img"></div>
<div class="slide-banner">
<a href="#none"><img src="./images/banner-01.png" alt=""></a>
<a href="#none"><img src="./images/banner-02.png" alt=""></a>
<a href="#none"><img src="./images/banner-03.png" alt=""></a>
</div>
</div>
<div class="items">
<div class="shortcut">
<a href="#none"
><img src="./images/shortcut-01.png" alt="shortcut-01"
/></a>
<div class="shortcut-content">
<h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3>
<p>
12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월
개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드
할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는
분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도
놓치지 마시고 작성해주세요~^^<br />
<b>기간:2022년 12월 18일~ 12월 25일</b>
</p>
</div>
<a href="#none"
><img src="./images/shortcut-02.png" alt="shortcut-02"
/></a>
</div>
<div class="news-gallery"></div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-logo">
<a href="#none"
><img src="./images/footer-logo.png" alt="footer-logo"
/></a>
</div>
<div class="copyright">
상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향
부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층
(주)코딩웍스
</div>
<div class="sns">
<a href="#none"><img src="./images/sns-01.png" alt="sns1" /></a>
<a href="#none"><img src="./images/sns-02.png" alt="sns2" /></a>
<a href="#none"><img src="./images/sns-03.png" alt="sns3" /></a>
</div>
</div>
</div>
<script src="./script/jquery-3.7.1.js"></script>
<script src="./script/custom.js"></script>
</body>
</html>
css
@charset "UTF-8";
body {
margin: 0;
background-color: #fff;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
/* 전체레이아웃 */
.container {
border: 1px solid red;
}
.main-content {
border: 1px solid black;
display: flex;
}
.main-content > div {
border: 1px solid black;
}
.left {
width: 200px;
}
.header {
}
.header > div {
border: 1px solid red;
}
.header-logo {
height: 100px;
}
.menu {
height: 400px;
}
.menu1 {
padding: 0;
}
.menu1 > li {
position: relative;
}
.menu1 > li > a {
background-color: #333;
display: block;
color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
transition: 0.5s;
}
.menu1 > li:hover > a {
border: 1px solid#333;
background-color: #333;
color: #fff;
}
.sub-menu {
position: absolute;
top: 0;
left: 100%;
width: 100%;
display: none;
}
.sub-menu > a {
display: block;
text-align: center;
height: 35px;
line-height: 35px;
background-color: #333;
color: #fff;
transition: 0.5s;
}
.sub-menu a:hover {
background-color: #ffffff;
color: #333;
}
.spot-menu {
height: 50px;
}
.right {
width: calc(100% - 200px);
}
.slide {
height: 400px;
position: relative;
}
.slide-img {
border: 1px solid blue;
height: 400px;
}
.slide-banner {
border: 1px solid green;
position: absolute;
top: 0;
right: 0;
}
.slide-banner > a > img {
width: 180px;
display: block;
}
.shortcut {
border: 1px solid black;
height: 200px;
display: flex;
align-items: center;
}
.shortcut-content {
display: block;
}
.shortcut-content > b {
font-weight: bold;
}
.news-gallery {
border: 1px solid red;
height: 250px;
}
.footer {
display: flex;
align-items: center;
height: 100px;
}
.footer > div {
text-align: center;
}
.footer-logo {
width: 200px;
}
.copyright {
width: calc(100% - 430px);
}
.sns {
width: 250px;
}
.sns > a > img {
width: 50px;
border-radius: 5px;
}
js
$(".menu1 li").mouseover(function () {
$(this).children(".sub-menu").stop().slideDown();
});
$(".menu1 li").mouseleave(function () {
$(this).children(".sub-menu").stop().slideUp();
});
답변 2
2
도움 되었으면 해서 답변 남겨요..!
문제가 뭘까 하고 궁금해서 같이 찾아 보고 싶어서 해봤는데
.sub-menu 에 z-index:999 했더니 적으신 코드에 잘 됩니다!!
옆 레이아웃 때문에 서브 메뉴가 밑에 깔려서 그런 것 같아요..☞☜..
0
헉 감사합니다...!!!