Brisresacenue
New Member
I have this JQ drop down menu and i am trying to get it to behave properly. it is probably a html css issue. I been playing with it for hours trying to get it to work right and have come to the conclusion i am not doing it right. I want to learn the correct way instead of just making it work. The menu slidetoggle causes the spacing to go haywire and the titles will bounce to make room for the extended menu. When I set heights and withs to make room the titles that dont have the slidetoggle will be on the bottom. the visable allows me to show/hide for adminsso far i have \[code\]<nav> <ul> <li style="display: inline;"><a href="http://stackoverflow.com/questions/13714412/Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a> </li> <li style="display: inline;"><a href="http://stackoverflow.com/questions/13714412/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>\[/code\]this script \[code\] <script type="text/javascript"> // $('#NavTitle1').hover(function () { $('.subMenu1').stop(true, true).slideToggle('medium'); }); $('#NavTitle2').hover(function () { $('.subMenu2').stop(true, true).slideToggle('medium'); }); </script>\[/code\]