Mengapa tuding tidak berfungsi dan gaya tidak muncul?
<p>Saya sedang mereka bentuk bar navigasi, tetapi alih tetikus saya tidak berfungsi. Apabila saya menuding pada item "lelaki" dalam menu lungsur saya, gaya tudingnya tidak berfungsi dan gaya itu tidak ditunjukkan dalam pemeriksa.有什么问题吗?这是我的HTML代码:</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">/* Bekas Navbar */
badan {
margin: 0;
padding: 0;
saiz kotak: kotak sempadan;
}
li {
hiasan teks: tiada;
}
.nav-container {
arah: rtl;
text-align: kanan
}
.navbar {
limpahan: tersembunyi;
warna latar belakang: #333;
font-family: Arial;
}
/* Pautan di dalam navbar */
.navbar a {
terapung: betul;
saiz fon: 16px;
warna: putih;
text-align: tengah;
padding: 14px 16px;
hiasan teks: tiada;
}
/* Bekas lungsur turun */
.dropdown {
terapung: betul;
limpahan: tersembunyi;
}
/* Butang lungsur turun */
.dropdown .dropbtn {
saiz fon: 16px;
sempadan: tiada;
garis besar: tiada;
warna: putih;
padding: 14px 16px;
warna latar belakang: mewarisi;
fon: mewarisi;
/* Penting untuk penjajaran menegak pada telefon mudah alih */
margin: 0;
/* Penting untuk penjajaran menegak pada telefon bimbit */
}
/* Kandungan dropdown (tersembunyi secara lalai) */
.dropdown-content {
paparan: tiada;
jawatan: mutlak;
warna latar belakang: #f9f9f9;
lebar: 100%;
kiri: 0;
bayang kotak: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
indeks-z: 1;
}
.dropdown:hover .dropdown-content {
paparan: blok;
}
.megamenu-container {
warna latar belakang: aqua;
lebar: 100%;
}
.megmenu {
lebar: 100%;
}
.megamenu-title {
lebar: 20%;
warna latar belakang: biru;
paparan: inline-block;
padding: 5px 15px;
vertical-align: atas;
}
.megamenu-subitems-default {
lebar: 70%;
warna latar belakang: biru ungu;
paparan: inline-block;
padding: 15px;
}
.megamenu-item {
float: unset !important;
padding: 0 !penting;
}
.man:hover .megamenu-subitems-default {
penglihatan: tersembunyi;
}
#subitems {
paparan: inline-block;
penglihatan: tersembunyi;
warna latar belakang: kuning hijau;
lebar: 70%;
}
.man:hover #subitems {
visibility: nampak;
}
.test {
warna: kuning;
}
.man:hover .test {
warna: gandum;
}</pra>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<kepala>
<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">
<tajuk>Dokumen</title>
</head>
<badan>
<div class="nav-container">
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">Berita</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa-caret-down"></i>
</butang>
<div class="dropdown-content">
<div class="megamenu-container">
<div class="megmenu">
<div class="megamenu-title">
<ul>
<li >
<div class="man">
<a class="megamenu-item" href="#">man</a>
</div>
</li>
<li id="wanita">
<a class="megamenu-item" href="#">wanita</a>
</li>
<li id="kanak-kanak">
<a class="megamenu-item" href="#">kid</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">test</p>
</div>
</div>
</div>
</div>
</badan>
</html></pre>
<p><br /></p>
<p>当我悬停在“lelaki”项目在我的下拉菜单，它的悬停样式不工作，不显示样式在&plt;/p>
