BootStrap 3.0 DropDown & jquery question


I have created a dropdown menu in bootstrap with a sub-menu.  I added a jquery function so that when you hover over the menu item, it drops down.  My problem is that when I hover over a menu item with a number of sub-menus, all of the submenus open at the same time as well.

Here's part of the code:

 $(function () {
    //make menus drop automatically
    $('ul.nav li.dropdown').hover(function() {
        $('.dropdown-menu', this).fadeIn();
    }, function() {
        $('.dropdown-menu', this).fadeOut('fast');
});//jQuery is loaded
 <div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="/">Home</a></li>
			<li><a href="/Home/Faqs">FAQs</a></li>

			<li class="dropdown">
				<a href="#" class="dropdown-toggle" id="Admin" data-toggle="dropdown">Admin<b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="/Members/Users.aspx">Manage Users</a></li>
					<li><a href="/Members/ManageMessages.aspx">View Client Messages</a></li>
					<li class="dropdown-submenu" id="li-StudentMetrics">
						<a href="#" class="dropdown-toggle" id="StudentMetrics" data-toggle="dropdown">Feedback<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="/Admin/AdminReport1.">Course Evaluations - Analysis</a></li>
							<li><a href="/Admin/AdminReport2">Course Evaluations - Text Responses</a></li>
							<li><a href="/Admin/AdminReport3">Course Modules Average Viewing Times</a></li>

Open in new window

Any help in figuring out how to stop the sub menus from opening when I hover over a top level menu item and then open when I hover over the sub-menu would be greatly appreciated.

Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Are you using boostrap3?  They do not support submenu's.

We haven't seen anyone using submenus in meaningful ways and the code necessary to make them work well is just too much overhead. Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0.
RBSAuthor Commented:
Thanks yes, I'm using Bootstrap 3  - sad - but good to know - It seems to work everywhere except ie on mac - however, will eliminate in design.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>It seems to work everywhere except ie on mac

I have not heard that phrase in a long time
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.