我正在使用一个运行良好的菜单，除了一个小问题。当用户将鼠标移出菜单列表时，我正在尝试找到一种保持菜单列表打开的方法。如果用户将鼠标悬停在“联系我们”选项卡上，这将打开菜单列表，当用户离开列表时，它会关闭菜单。我需要找到一种方法，以便当用户移动列表时，它保持打开状态并且必须单击关闭。这可能吗。我在以下位置附加了 HTML 和 CSS 代码：
我希望这样做的原因是，当用户完成表单并使用 jquery 隐藏表单时，菜单关闭并且用户看不到已提交数据。如果有人能引导我朝着实现这一目标的方向前进，我将不胜感激。我试图准确解释，但如果您需要更多信息，请询问。非常感谢
css
<ul id="menu">
<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome <br /> <span class="welcomeName"></span></h2>
</div>
<div class="col_2">
<table width="60%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
</td>
</tr>
<tr>
<td width="100%">
</td>
</tr>
<tr>
<td width="100%"><br />
<img src="images/help.png" width="18" height="18" align="absmiddle" />
<span class="newitems"> View your <a href="cp/contacts/contacts.php">Contacts</a></span></td>
</tr>
<tr>
<td width="100%"><br />
<img src="images/feedback_icon.jpg" width="18" height="18" align="absmiddle" />
<span class="newitems"> Submit <a href="javascript:feedback()">Feedback</a></span></td>
</tr>
</table>
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">Requests</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Submit a request</h2>
</div>
<div class="col_1">
<h3>Boxes</h3>
<ul>
<li><a href="#">New Intake</a></li>
<li><a href="#">Retrieve</a></li>
<li><a href="#">Return</a></li>
<li><a href="#">Destroy</a></li>
<li><a href="#">Permanently Destroy</a></li>
</ul>
</div>
<div class="col_1">
<h3>Files</h3>
<ul>
<li><a href="#">Add</a></li>
<li><a href="#">Retrieve</a></li>
<li><a href="#">Return</a></li>
<li><a href="#">Destroy</a></li>
<li><a href="#">Permanently Destroy</a></li>
</ul>
</div>
<div class="col_1">
<h3>Recycle</h3>
<ul>
<li><a href="#">Boxes</a></li>
<li><a href="#">Sacks</a></li>
</ul>
</div>
<div class="col_1">
<h3>Supply</h3>
<ul>
<li><a href="#">Boxes</a></li>
<li><a href="#">Sacks</a></li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li><a href="#" class="drop">Reports</a><!-- Begin report columns Item -->
<div class="dropdown_4columns"><!-- Begin report columns container -->
<div class="col_4">
<h2>View a report</h2>
</div>
<div class="col_1">
<h3>Boxes</h3>
<ul>
<li><a href="#">New Intake</a></li>
<li><a href="#">Retrievals</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Destroyed</a></li>
<li><a href="#">Permanently Destroyed</a></li>
</ul>
</div>
<div class="col_1">
<h3>Files</h3>
<ul>
<li><a href="#">New Additions</a></li>
<li><a href="#">Retrievals</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Destroyed</a></li>
<li><a href="#">Permanently Destroyed</a></li>
</ul>
</div>
<div class="col_1">
<h3>Recycle</h3>
<ul>
<li><a href="#">Boxes</a></li>
<li><a href="#">Sacks</a></li>
</ul>
</div>
<div class="col_1">
<h3>Supply</h3>
<ul>
<li><a href="#">Boxes</a></li>
<li><a href="#">Sacks</a></li>
</ul>
</div>
</div><!-- End report columns container -->
</li><!-- End report columns Item -->
<li><a href="#" class="drop">Control panel</a><!-- Begin control panel columns Item -->
<div class="dropdown_5columns"><!-- Begin control panel columns container -->
<div class="col_5">
<h2>Client Control Panel</h2>
</div>
<div class="col_1">
<h3>Tickets</h3>
<ul>
<li><a href="#">Inbox</a></li>
<li><a href="#">Sent Tickets</a></li>
<li><a href="#">Received Tickets</a></li>
<li><a href="#">Compose Ticket</a></li>
</ul>
</div>
<div class="col_1">
<h3>Messages</h3>
<ul>
<li><a href="#">Broadcast Message</a></li>
<li><a href="#">Archived messages</a></li>
</ul>
</div>
<div class="col_1">
<h3>Actions</h3>
<ul>
<li><a href="#">Actions</a></li>
<li><a href="#">View actions</a></li>
</ul>
</div>
<div class="col_1">
<h3>History</h3>
<ul>
<li><a href="#">User Log</a></li>
<li><a href="#">Actions Log</a></li>
</ul>
</div>
<div class="col_1">
<h3>Contacts</h3>
<ul>
<li><a href="#">View Contacts</a></li>
<li><a href="#">Edit Contacts</a></li>
</ul>
</div>
</div><!-- End control panel columns container -->
</li><!-- End control panel columns Item -->
<li><a href="#" class="drop">Logout</a><!-- Begin logout 2 columns Item -->
<div class="dropdown_2columns"><!-- Begin logout 2 columns container -->
<div class="col_2">
<h2>Securely sign out of system<br /></h2>
</div>
<div class="col_2">
<img src="img/bluemanmxxl.png" width="70" height="70" class="img_left imgshadow" alt="" />
<p class="newsSpace"><a href="#" title="logout">Signout</a></p>
</div>
</div><!-- End 2 logout columns container -->
</li><!-- End 2 logout columns Item -->
<li class="menu_right"><a href="#" class="drop">Help</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">Contact Us</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Which dept do you need to contact!</h2>
<div id="confirm_department"></div>
</div>
<div id="formImage">
<div class="col_1">
<ul class="greybox">
<li><a class="anchorTest" name="Technical" href="#">Technical</a></li>
<li><a class="anchorTest" name="Administration" href="#">Administrative</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a class="anchorTest" name="Billing" href="#">Billing</a></li>
<li><a class="anchorTest" name="Error"href="#">Report Error</a></li>
</ul>
<br />
<div id="formShow">
<form action="feedback.php" method="post" class="webform">
<fieldset>
<legend><span class="subtitle">Submit Technical Report</span></legend>
<label for="dept">Department</label>
<input id="dept" name="dept" class="text" type="text" />
<label for="name">Full Name:</label>
<input id="name" name="name" class="text" type="text" />
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
<label for="position">Position:</label>
<input id="Position" name="Position" class="text" type="text" />
<label for="Feedback">Problem:</label>
<textarea name="Feedback" cols="22" rows="5"></textarea>
</fieldset>
<input class="submit" type="submit" name="submit" value="Submit Report" />
</form>
</div>
</div>
<div class="col_1">
<ul class="greybox">
<li><a class="anchorTest" name="General" href="#">General</a></li>
</div>
<!---
<div class="col_3">
<h2>Here are some image examples</h2>
</div>
<div class="col_3">
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
</div>
-->
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</ul>