私は非常にうまく機能するメニューを使用しています。ユーザーがマウスをメニュー リストから離したときに、メニュー リストを開いたままにしておく方法を見つけようとしています。ユーザーが [お問い合わせ] タブにカーソルを合わせると、メニュー リストが開き、ユーザーがリストを離れるとメニューが閉じます。ユーザーがリストから移動しても、開いたままにして、クリックすると閉じる必要がある方法を見つける必要があります。これは可能ですか？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>