BootStrap 3.0 DropDown & jquery question

Hi:

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');
    });//hover
    
});//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>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

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.

RBS
RBSAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you using boostrap3?  They do not support submenu's.   https://github.com/twbs/bootstrap/pull/6342#issuecomment-11594010

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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.

RBS
0
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.