<p>내비게이션 바를 디자인하고 있는데 마우스 오버가 작동하지 않습니다. 드롭다운 메뉴에서 "man" 항목 위로 마우스를 가져가면 해당 항목의 마우스 오버 스타일이 작동하지 않고 해당 스타일이 검사기에 표시되지 않습니다.당신이 좋아하는 HTML 표현이 있나요?</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">/* Navbar 컨테이너 */
몸 {
여백: 0;
패딩: 0;
상자 크기 조정: 테두리 상자;
}
리 {
텍스트 장식: 없음;
}
.nav-컨테이너 {
방향: rtl;
텍스트 정렬: 오른쪽
}
.navbar {
오버플로: 숨김;
배경색: #333;
글꼴 모음: Arial;
}
/* 탐색바 내부 링크 */
.navbar a {
플로트: 오른쪽;
글꼴 크기: 16px;
색상: 흰색;
텍스트 정렬: 중앙;
패딩: 14px 16px;
텍스트 장식: 없음;
}
/* 드롭다운 컨테이너 */
.쓰러지 다 {
플로트: 오른쪽;
오버플로: 숨김;
}
/* 드롭다운 버튼 */
.dropdown .dropbtn {
글꼴 크기: 16px;
테두리: 없음;
개요: 없음;
색상: 흰색;
패딩: 14px 16px;
배경색: 상속;
글꼴: 상속;
/* 휴대폰의 수직 정렬에 중요 */
여백: 0;
/* 휴대폰의 수직 정렬에 중요 */
}
/* 드롭다운 콘텐츠(기본적으로 숨겨짐) */
.dropdown-content {
디스플레이: 없음;
위치: 절대;
배경색: #f9f9f9;
너비: 100%;
왼쪽: 0;
상자 그림자: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
Z-색인: 1;
}
.dropdown:hover .dropdown-content {
디스플레이: 블록;
}
.megamenu-컨테이너 {
배경색: 아쿠아;
너비: 100%;
}
.메그메뉴 {
너비: 100%;
}
.megamenu-제목 {
너비: 20%;
배경색: 파란색;
디스플레이: 인라인 블록;
패딩: 5px 15px;
수직 정렬: 상단;
}
.megamenu-subitems-default {
너비: 70%;
배경색: 청자색;
디스플레이: 인라인 블록;
패딩: 15px;
}
.megamenu-item {
float: 설정 해제 !중요;
패딩: 0!중요;
}
.man:hover .megamenu-subitems-default {
가시성: 숨김;
}
#하위 항목 {
디스플레이: 인라인 블록;
가시성: 숨김;
배경색: 황록색;
너비: 70%;
}
.man:hover #하위 항목 {
가시성: 가시성;
}
.시험 {
색상: 노란색;
}
.man:hover .test {
색상: 밀;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./megamenu.css">
<제목>문서
</머리>
<본문>
<div class="nav-container">
<div class="navbar">
<a href="#home">홈</a>
<a href="#news">뉴스</a>
<div class="dropdown">
<button class="dropbtn">드롭다운
<i class="fa fa-caret-down"></i>
</버튼>
<div class="dropdown-content">
<div class="megamenu-container">
<div class="megmenu">
<div class="megamenu-title">
<리>
<div class="man">
<a class="megamenu-item" href="#">남자</a>
</div>
</li>
<li id="여성">
<a class="megamenu-item" href="#">여성</a>
</li>
<li id="아이">
<a class="megamenu-item" href="#">아이</a>
</li>
</ul>
</div>
<div class="megamenu-subitems-default">
<p>hello-default</p>
</div>
<div class="megamenu-subitems-test" id="subitems">
<p>hello-1</p>
</div>
<div class="megamenu-subitems">
<p>hello-2</p>
</div>
<div class="megamenu-subitems">
<p>hello-3</p>
</div>
<div class="megamenu-subitems">
<p>hello-4</p>
</div>
</div>
</div>
<p class="test">테스트</p>
</div>
</div>
</div>
</div>
</body>
</html></pre>
<p><br /></p>
<p>当我悬停에서 "man"은 我的下拉菜单, 它的悬停样式不工業, 不显示样式에서 Inspect에서</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 파일에는 다음 규칙이 있습니다:
으아악그러나 #subitems는 .man의 자손이 아닙니다. #subitems를 .man과 동일한 레벨이나 그 하위 항목으로 배치해야 합니다.
이 CSS 규칙은 .hover가 클래스 .man의 상위 항목 중 하나 위에 있을 때 ID가 #subitems인 요소가 표시되도록 지정합니다. 그러나 HTML에서 .man은 하위 항목이 하나만 있는 하위 항목입니다. 요소 .megamenu의 div -안건.
기본 하위 div를 숨기려면 다음 선택기를 바꿔보세요.
으아악함께:
으아악각 메뉴 항목의 하위 항목에 대해 각 하위 항목 div에 고유 ID를 부여하고 JavaScript를 사용하여 가시성을 제어하거나 .megamenu-subitems div가 li 요소 수준과 동일한 페이지에 있도록 레이아웃을 변경하는 것이 좋습니다. 형제 선택자를 사용하거나 li 요소의 자손으로 만드세요.