I am using a menu which works very well, apart from one niggle. I am trying to find a way to keep the menu list open when a user moves the mouse off the menu list. If a user hovers over the Contact Us tab, this opens the menu list and when a user leaves the list it closes the menu. I need to find a way so when a user moves of the list, it stays open and has to close on a click. Is this possible. I have attached HTML and CSS code at:
The reason I am looking to do this, is because when a user completes the form and I hide the form using jquery, the menu closes and the user does not get to see that there data has been submitted. I would be grateful if someone could steer me in a direction to achieve this. I have tried to explain accurately, but if you need any more info, please ask. Many thanks
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>
