I found another solution. I added that after my code : <script type="text/javascript"> $('.dropdown-menu').click(function(event){ event.stopPropagation(); }); </script> Dropdown can't works with this solution, so i used "dropdown-submenu" to fix that (Thanks @Schmalzy for that). So when i touch a link, the submenu open. the submenu can't works normally on a tablet without the code above.

You have to use stopPropagation event to avoid closing of the dropdown menu. $(function () { $('.dropdown-menu').find('input[type="text"]').click(function (e) { e.stopPropagation(); }); }); Here is one bootply example for you. http://bootply.com/63262 . NB Please make sure that you research a bit before asking questions, and also please provide relevant codes that you have used.

Change this: $(document).ready(function () { $("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#navbar-toggle").is(":visible") $("#nav-collapse").toggle(); }); }); to this: $(document).ready(function () { $("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#nav-collapse").removeClass("in").addClass("collapse"); }); }); See http://jsfiddle.net/fw7vh/4/

What causing this behavior is this line: alert("hello #" + ++islide); When alert() is called inside the slide event handler the mouse is never released. So you have to remove the call to alert() : http://jsfiddle.net/Rusln/eKjCD/

It is possible. I made you a working demo to give a good start. Working demo (Right click on any table row to see it in action) First create your dropdown menu, hide it and change its position to absolute: #contextMenu { position: absolute; display:none; } Then bind a contextmenu event to your table rows so it shows dropdown/context menu and position it at the cursor: var $contextMenu = $("#contextMenu"); $("body").on("contextmenu", "table tr", function(e) { $contextMenu.css({ display: "block", left: e.pageX, top: e.pageY }); return false; }); Then when user select an option hide dropdown/context menu: $contextMenu.on("click", "a", function() { $contextMenu.hide(); });

You need to set position:relative on the list items for the default state, not for the hover state: #cssmenu ul li { position: relative; } Otherwise when you hover out the sub-menu is positioned relative to the menu container and not its parent Updated fiddle

you have to override the default media queries in order to get navbar-collapse to remain visible at all times. For example, you'll find this on line 4296 of Bootstrap 3's style.css: @media (min-width: 768px) { .navbar-toggle { display: none; } } This hides the button when the browser window exceeds 768px. So rather than hide it, change display to block. Poke around and play with the other elements, like navbar-nav. It's the same principle.

The navbar collapses at 768px, so this media query will float your navbar-nav to the right once the navbar is collapsed. Here is a jsFiddle Demo CSS @media (max-width: 768px){ .navbar-nav{ text-align: right; } }

You do realize the dropdown functionality (and several other features) requires Bootstrap's JS file right (which in turn requires jQuery)? I don't see a reference to it, you could try adding these script tags at the bottom of your body tag: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Here is a nearly identical question that has had heaps of answers... How to make twitter bootstrap menu dropdown on hover rather than click Hope this helps and kudos for opting to use Bootstrap. In my experience, you won't be disappointed.

I made a fiddle here http://jsfiddle.net/xUWdj/ Changes made: Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead. All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0; You should now be able to style/position the rest of the menu to how you want it. Edit: Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/ Changed li a { display: block; line-height: 30px; } Added margins to move the ul's to -42px 0 0 130px I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties

Make sure you have included the bootstrap.js file on that page. Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/ Here's markup that works, based on your example <div class="navbar"> <div class="navbar-inner"> <div class="container"> <div class="nav-collapse collapse"> <ul class="nav"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>

The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto.. "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" - https://github.com/twbs/bootstrap/pull/6342 But, with a little extra CSS you can get the same functionality in 3. Here is an example that uses 3.0 RC 1: http://bootply.com/71520 Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684 CSS .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-

Try to change the order of defining scripts. First load Jquery script and then bootstrap.js <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="dist/js/bootstrap.js"></script> Js Fiddle Demo

Add this CSS: .dropdown-menu:before { position: absolute; top: -5px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .dropdown-menu:after { position: absolute; top: -3px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } I got it from the nav dropdown styles and changed a couple of values. It should be easy to tune for your needs.

Check out this solution from Off Canvas Layout For Twitter BootStrap Credit to krichnafsky

I don't find any error in your code, seems like you are missing or not being loaded bootstrap-dropdown.js file moreover please add bootstrap.js core file (as added in jsfiddle in below link) check this jsfiddle, http://jsfiddle.net/mastermindw/kbzxV/

You need to remove the data-toggle="tab" from the outer li. Your html should look like this for that menu when you are done. <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Youth <i class="caret"></i> </a> <ul class="dropdown-menu" role="menu"> <li><a href="/Home/Youth">YS2</a></li> </ul> </li>

The following works for twitter bootstrap version 2.3.2. I do not recommend you continuing with any older version of twitter. !!! 5 html head link(rel='stylesheet', href='css/HOMEedit.css') link(rel='stylesheet', href='css/bootstrap.css') include bootstrap/inc/scripts body .dropdown a(href="#", data-toggle="dropdown").dropdown-toggle Dropdown trigger ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu') li a(href='#', tabindex='-1') Action li a(href='#', tabindex='-1') Something else here li.divider li a(href='#', tabindex='-1') Separated link script. $('.dropdown-toggle').dropdown() In the above I use a separate file 'scripts' which i incl

The element which can be tabbed is the a (anchor) not the content. So click a link in your dropdown should active the tab() on a anchor of your tabbar: $('#treatment_dropdown a').click(function (e) { e.preventDefault() $($(this).attr('href')+'_tt').tab('show') })

You have 3 '.dropdown-toggle' links in your code. You can toggle one of them at a time: $(document).ready(function () { $('.dropdown-toggle').eq(0).dropdown('toggle'); }); Working fiddle: http://jsfiddle.net/hieuh25/fzNjJ/

You should just have include 'nameoffile.php' where you want the include code to be displayed. Are all files in the same folder location? If so there's no reason for the above to not work

Give the li element an id <li class="dropdown" id="product"> After giving that element an id, all you need to do is use click event and toggleClass on .navbar-container. $('#product').click(function(){ $('.navbar-container').toggleClass('open'); }); Check out this jsFiddle - I've updated the fiddle. In order to see the effect you can inspect the code and then click on the Products. You'll see the open class toggling. I hope this helps.

z-index can be inherited, perhaps the parent div has z-index:0 !important; on it, so you must set !important to override it. z-index: 9999 !important; Or you have set menu items to have less z-index than the parent, so they get overlapped.

I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work. jQuery(document).ready(function($) { $("li.dropdown a").click(function(e){ $(this).next('ul.dropdown-menu').css("display", "block"); e.stopPropagation(); }); });

Let's say you're using it as a search form. Firstly, you need to remove tabindex="-1" to each dropdown option, and add the class search-option. Then you can add the following jQuery: $("#search-input").keydown(function(e){ if(e.which == 13) { // enter setTimeout(function(){ $(".search-option:first").focus(); },100); } }); $(".search-option").keydown(function(e){ if(e.which == 40) { // down $(this).parent().next().find(".search-option").focus(); return false; // stops the page from scrolling } if(e.which == 38) { // up $(this).parent().prev().find(".search-option").focus(); return false; // stops the page from scrolling } if(e.which == 13) { // enter alert("Do something"); } });

The example code in the Bootstrap documentation is: <ul class="nav nav-tabs"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Seems like you have an extra div in there? If that is not the problem then you would need to examine what else is different in-between the two pages, as it is likely something else is interfering with the CSS.

I think, your spec is not able to find your links in bootstrap dropdown menu. I think, you just have to click that dropdown first than, it will be able to find that links. try with this : describe "with valid information" do let(:user) { FactoryGirl.create(:user) } before do visit '/signin' fill_in "Email", with: user.email.upcase fill_in "Password", with: user.password click_button "Sign in" end click_link "Account" it { should have_title(user.name) } it { should have_link('Profile', href: user_path(user)) } it { should have_link('Sign out', href: signout_path) } it { should_not have_link('Sign in', href: signin_path) } end

Just Remove the type="text/javascript" <script src="JavaScript/jquery.js" /> <script src="JavaScript/bootstrap-min.js" /> Here is the update - http://jsfiddle.net/andieje/kRX6n/

What you're looking for is a sub menu. dropdown is the element for a block, essentially. dropdown-menu is the element for a ul, and dropdown-submenu is the element for an li to create a sub menu inside a dropdown menu. So change the li's class from dropdown to dropdown-submenu. This will call the javascript component for dropdown's to render the right behavior. <div class="nav-collapse collapse"> <ul class="nav"> <%= nav_link("Home", home_path) %> <li class="dropdown-submenu <%= "active" if params[:controller] == "courses" || params[:controller] == "enrolments" %>"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a> <

Check out this fiddle, I've commented out some styles (max-width etc..) Changes are HTML <div id="header-right" class="pull-right"> CSS #header-container { /*overflow: auto;*/ width: 100%; background-color: #231F20; height: 50px; } #header-wrapper { /*margin-left: auto; margin-right: auto; width: 80%; min-width: 1000px; max-width: 1300px;*/ overflow: visible; } #header-left { float: left; margin: 5px 0 0 0; } #header-right { float: right; margin: 5px 0 0 20px; } .dropup, .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #ffff

this is probably what you need: $(function(){ // Fix input element click problem $('.dropdown input, .dropdown label').click(function(e) { e.stopPropagation(); }); }); source: http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

You could try using then panel widget from the latest jquerymobile (1.3.0). Maybe this is not what you want but there are options so you could do it programatically. http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html

Curiously, this is being caused by the max-width property set on the <img> tags in the menu. Assuming you're only using .pad5right in the menu, you need to modify your CSS to get rid of the max-width: 100%` set by Bootstrap: .pad5right { padding-right: 5px; max-width: none; } A more general style for any menu would be this: .dropdown-menu img { max-width: none; } Quite a strange issue which took a while to solve, and likely a bug in Chrome.

Just put this css i think this is worked .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: #B54646; }

You can use :focus to find if the search box has focus in the second hover function, without any need to give things additional events. .size() will return 1 if it has focus and 0 otherwise, and then the ! casts those to true and false, respectively, before negating. Then in the first hover function, check to make sure there are no currently open menus before opening. $('ul.nav li.dropdown').hover(function() { if (!$(".dropdown-menu:visible").size()) { $(this).closest('.dropdown-menu').show(); $(this).addClass('open'); } }, function() { if (!$(".navbar-search input:focus").size()) { $(this).closest('.dropdown-menu').hide(); $(this).removeClass('open'); } }); CodePen demo

Probably cause the dropdown is in the navbar. This one should work .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #16A170 !important; background-image: linear-gradient(to bottom, #17AA76, #149466) !important; background-repeat: repeat-x !important; color: #FFFFFF; outline: 0 none; text-decoration: none; }

Ah, I figured out the error. It is something that doesn't seem to agree in bootstrap.css .pull-right > .dropdown-menu { //right: 0; left: auto; } have to delete right: 0. this of course only works if you're using pull-right like i am for navbar search.

You can manually call the 'show' parameter of your .typeahead instance, like this: $('input:text#YourInputID').typeahead('show'); And you can hide it with: $('input:text#YourInputID').typeahead('hide');

You need to edit this class .dropdown .open in your css. So if you wanted the background to change, it will be like this: .dropdown.open { background: #fff; } And for the font color change it here: .dropdown.open .dropdown-toggle { color: #000; } See the updated fiddle here