Working on my ASP.NET webpage has presented me with a frustrating problem that I cannot seem to solve.
After researching for three days, I have not found anyone who has faced this issue before or offered any solutions.
The menu/submenu created using HTML/CSS has a toggling effect that should slide down or fade in. While it works fine on Internet Explorer, Chrome and Firefox present challenges. The submenu appears correctly initially but then starts to close and reopen on its own when the mouse is moved away, creating a continuous cycle until the page reloads.
Below is the HTML code for the menu...
<ul id="menu">
<li><a href="Default.aspx">Home</a></li>
<li><a href="Services.aspx">Services</a>
<ul id="submenu">
<li>Custom CRM</li>
<li>Website Development</li>
</ul>
</li>
<li><a href="About.aspx">About</a></li>
<li><a href="Contact.aspx">Contact Us</a></li>
</ul>
This is the CSS related to the menu...
#menu
{
padding:0;
text-align: center;
margin: 0;
width: 100%;
}
#menu li
{
height: 35px;
float: left;
list-style: none;
width: 25%;
font-size: larger;
cursor: pointer;
position: relative;
}
...
Lastly, here's the JQuery code implemented...
<script type="text/javascript">
$(document).ready(function () {
$("#menu ul").parent().hover(function () {
$("#submenu").stop(true, true).fadeToggle("slow");
});
});
</script>
Any assistance in resolving this issue would be greatly appreciated. Thank you!
--Mark