마우스 오버가 작동하지 않고 스타일이 표시되지 않는 이유는 무엇입니까?
<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>
