navigation items close before you can click on them

[higgsyd]

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

[Nancy OShea]

I don't use on Hover triggers anymore.  It's a bad user experience for people on touch screen devices or who may not have a mouse to hover with.  Keep in mind that touch screens are showing up everywhere these days, not just mobile phones and tablets.  So onClick or Tap is a safer trigger for your navigation menu. 

[ALsp]

Bootstrap is a jack of all trades, master at …. [fill in the blank]

Hand-coded menus, or menus made with quality tools, accommodate both mouse and touch users, seamlessly and automatically.

Examples:

Adaptive Menu Magic  (priority-based)

Maxi Menu Magic  (Flexbox + Mega support)

[higgsyd]

Thanks for your reply.  But as coded, the tap is working fine on my iPad and hover is ALMOST fine on Desktop.  My only outstanding issue at the moment is when, on the Desktop,  once the hover has opened the sub-menu, it disappears until after two or three more  'hovers', then it correctly stays open, allowing the user to click a sub entry.  Can you say why the submenu closes prematurely? Many thanks

[Nancy OShea]

It looks like your submenu is spaced too far below the top level link's hotspot area.  When a user's mouse is a hairline off the hotspot region, your submenu closes.   Incidentally, the mobile hamburger icon does not work at all for me.  This is not a good menu.  I would not use it.

[higgsyd]

yes, your suggestion the sub-menu is spaced too far below the link's hotspot area certainly fits with the user-experience.  Any idea what I would need to alter?  Remove some padding on an element maybe?  BTW you suggest it's not a good menu to use but it's a bootstrap menu I got from DW's Insert Bootstrap Component menu, I thought you were a BS supporter, not sure why it's not usable.  I know the hamburger menu doesn't work, I'm hoping I just need to add a media-query

[Nancy OShea]

To clarify, the basic Bootstrap drop-menu works on click just fine and as intended.   But the hack you're implementing for mouseover breaks the menu.  That's why I don't recommend using the hack. 

[BenPleysier]

To answer your question, have a look at CSS :hover Selector

Having said that, I think that you should heed Nancy OShea​'s reply like I have.

[osgood_ · Accepted solution]

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>