Having trouble with a JQ drop down menu and suspect it's an HTML/CSS issue. Spent hours tweaking it, but still not working as expected. Looking to understand the correct approach rather than just getting it to function. The slidetoggle feature is messing up the spacing and causing titles to shift when the menu expands. Setting heights and widths for space creates issues with untoggled titles being pushed downward.
The "visible" attribute allows me to toggle visibility for admins only.
Current code snippet:
<nav>
<ul>
<li style="display: inline;"><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a>
</li>
<li style="display: inline;"><a href="Support.aspx" class="NavTitle ntAlter">Support</a>
</li>
<li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle" style="display: inline-block;">
<span id="NavTitle1"> Items </span>
<ul style="list-style-type: none;">
<li><a style="display: none;" class="subMenu1">Add</a></li>
<li><a style="display: none;" class="subMenu1">Approve</a></li>
<li><a style="display: none;" class="subMenu1">Update</a></li>
<li><a style="display: none;" class="subMenu1">Delete</a></li>
</ul>
</li>
<li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;">
<span id="NavTitle2"> Contacts</span>
<ul style="list-style-type: none;">
<li><a style="display: none;" class="subMenu2">Add</a></li>
<li><a style="display: none;" class="subMenu2">Approve</a></li>
<li><a style="display: none;" class="subMenu2">Update</a></li>
<li><a style="display: none;" class="subMenu2">Delete</a></li>
</ul>
</li>
</ul>
</nav>
Script handling the hover effect:
<script type="text/javascript">
$('#NavTitle1').hover(function () {
$('.subMenu1').stop(true, true).slideToggle('medium');
});
$('#NavTitle2').hover(function () {
$('.subMenu2').stop(true, true).slideToggle('medium');
});
</script>