navigation items close before you can click on them

higgsyd wrote My site is http://v38.ancestry.higgsy.co.uk/index.php I added a bootstrap navbar but then I found you had to click to open it and I wanted for it to expand on hover, so I added this over-ride code I found on the internet .dropdown:hover>.dropdown-menu { display: block; } and it seems to work, the only problem now is when you hover and it expands, if you move to pick an item and it closes before you can click it.  On the second or sometimes  third re-attempt it stays expanded ok and sub-items can be clicked.  Can you say why these random closures are happening? Many thanks

Not that I think using hover effects is a good idea as they won't work on mobile but you can use the bit of jquery below to hover over your top-level menu items to expose the sub-menu and close it again on mouseleave:

<script>

$(document).ready(function(){

$('.dropdown').mouseover(function(){

$('.dropdown-menu').css('display','none');

$(this).find('.dropdown-menu').css('display','block');

});

$('.dropdown-menu').mouseleave(function(){

$(this).css('display','none');

});

});

</script>

Obviously you don't need the below if you use the script above:

.dropdown:hover>.dropdown-menu {

display: block;

}

You can also add a click event script to cater for mobile:

<script>

$(document).ready(function(){

$('.dropdown').click(function(){

$('.dropdown-menu').css('display','none');

$(this).find('.dropdown-menu').css('display','block');

});

});

</script>