さて、小さなメニュー バーがあり、メニュー内の 3 つの要素にはさらにサブメニューがあります。しかし、メニューバー内の要素には不要なスペースがあり、作成したサブメニューにも不要な背景幅があり、読者が理解できるようにコード内で白くしています。この不必要な幅のため、この場合は白である非表示の幅にマウスを置いても、メニュー バーに表示されるはずのホバー効果が表示されますが、ライブ コードでは白にはなりません。そのため、ライブ コードでは表示されないため、訪問者は、サブメニューからマウスを離してもサブメニューが非表示にならない理由について混乱する可能性があります。そのため、要素間の不要なスペースを削除し、メニュー バーで正しく配置し、サブメニューの幅をサブメニュー内のリンクの幅に縮小したいと考えています。これを説明するのは少し難しいかもしれないので、このフィドル リンクを投稿します。デモ
質問には 30000 文字しか投稿できないため、CSS コードを投稿できません。jsfiddle からコピーしてローカル マシンでコードをコンパイルできます。その余分な努力を申し訳ありません。Html も、いくつかのコードを投稿する必要があるという理由だけで投稿しています。
HTML コード
<html>
<head>
<link rel="stylesheet" type="text/css" href="expertystemsHome2.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Expertystems</title>
</head>
<body>
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home"><a href="">AAAAAA</a></li>
<li class="Repair"><a href="">BBBBBB</a>
<ul class="submenu">
<li>
<a href="">b1</a>
</li>
<li>
<a href="">b2</a>
</li>
<li>
<a href="">b3</a>
</li>
<li>
<a href="">b4</a>
</li>
<li>
<a href="">b5</a>
</li>
<li>
<a href="">b6</a>
</li>
<li>
<a href="">b7</a>
</li>
<li>
<a href="">b8</a>
</li>
</ul>
</li>
<li class="Unlock"><a id="tempUnlock" href="">CCCCCC</a>
<ul id="mozillaPain2" class="submenu2">
<li>
<a href="">c1</a>
</li>
<li>
<a href="">c2</a>
</li>
<li>
<a href="">c3</a>
</li>
<li>
<a href="">c4</a>
</li>
</ul>
</li>
<li class="Expertise"><a id="Expertise" href="">DDDDDD</a>
<ul id="mozillaPain3" class="submenu4">
<li>
<a href="">d1</a>
</li>
<li>
<a href="">d2</a>
</li>
<li>
<a href="">d3</a>
</li>
<li>
<a href="">d4</a>
</li>
<li>
<a href="">d5</a>
</li>
<li>
<a href="">d6</a>
</li>
<li>
<a href="">d7</a>
</li>
<li>
<a href="">d8</a>
</li>
<li>
<a href="">d9</a>
</li>
<li>
<a href="">d10</a>
</li>
<li>
<a href=""><img style="width: 158px;height: auto;" src="images/creation.png"></a>
</li>
</ul>
</li>
<li class="Careers"><a href="">EEEEEE</a></li>
<li class="Contact"><a href="">FFFFFF</a></li>
</ul>
</div>
</body>
</html>