一种方法是在加载时隐藏
然后，每当
当光标位于悬停时显示的div内时，如何保持悬停div打开？现在，光标一移开，它就消失了。我需要"；悬停在我身上"连接到部门外部。
更新：
我正在尝试建立一个导航，这样当游客在甜点上徘徊时，它会显示一个子菜单。请参阅下方的代码
<table width="66%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="4%" height="265" align="left" valign="top"> </td>
<td width="26%" align="left" valign="top"><br> <br>
<span style="font-family: Arial; font-size:38px; color:#000; line-height: 30px; letter-spacing:5px;">Navigation</span>
<p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;">
</p>
<p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;"> </p>
<p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;"> </p>
<p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;">
<span style="font-family: oswald; font-size:20px; color:#aa1b1b; text-transform:uppercase; line-height: 20px; letter-spacing:5px;"></span></p>
<p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;"> </p>
</td>
<td width="30%" align="center" valign="top">
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="">
<tr>
<td width="1%"></td>
<td width="94%"><a target="_blank" href="" style="font-family: 'arial', sans-serif; font-size:17px; color:#333; text-decoration:none;">Home</a></td>
<td width="5%"> </td>
</tr>
<tr>
<td></td>
<td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none; ">Cooking</a></td>
<td> </td>
</tr>
<tr>
<td></td>
<td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Receipt</a></td>
<td>></td>
</tr>
<tr>
<td></td>
<td bgcolor="#E5F0FA"><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Desserts</a></td>
<td bgcolor="#E5F0FA">></td>
</tr>
<tr>
<td></td>
<td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Blog</a></td>
<td> </td>
</tr>
<tr>
<td></td>
<td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Downloads</a></td>
<td> </td>
</tr>
<tr>
<td></td>
<td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Contact </a></td>
<td> </td>
</tr>
</table>
</td>
<td width="1%" align="left" valign="top"> </td>
<td width="39%" align="left" valign="top" bgcolor="#e5f0fa">
<!--- SUB NAV---->
<p>
<strong>Sub Menu</strong><br><br>
Chocolate<br>
Ice Cream<br>
Cinnamon-Honey<br>
Cookies<br>
Cake
<br>
</p>
<!--- /SUB NAV---->
</td>
</tr>
</table>
.show-on-hover然后，每当
.hoverable或.show-on-hover悬停时，都可以显示它。
我还将.hoverable设置为display:block，并将<ul>的边距更改为填充，以消除.hoverable和.show-on-hover之间悬停区域的间隙。
.show-on-hover {
display: none;
}
.hoverable {
display: block;
}
.show-on-hover ul {
margin-top:0;
padding-top:1em;
}
.hoverable:hover+.show-on-hover,
.show-on-hover:hover {
display: block;
}<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>另一种方法是将.hoverable放入.show-on-hover中
但是这会更改HTML的结构，这可能是不可取的。
.show-on-hover ul {
display: none;
}
.show-on-hover:hover ul {
display: block;
}<div class="show-on-hover">
<a>Hover over me!</a>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>