Reputation: 1457
I have altered my Bootstrap dropdown in two ways:
li
from which it drops down is still a clickable linkThe dropdown functionality is working properly, but when you mouse down the dropdown's li
s the dropdown disappears when you get to the 2nd or third item. As far as I can tell, this happens regardless of the content on the page below it.
I'm not sure where the problem is coming from, as I've checked any CSS instances of z-index
.
You can see the dropdown issue live here when you hover over the menu item for "Tools". I would paste HTML and/or CSS here, but I'm really not sure where the problem lies, so I'd be putting up an extravagant amount of code and/or guessing....
Upvotes: 0
Views: 155
Reputation: 3426
Hope this helps
Replace below css
* {
font-family: "Raleway", sans-serif;
color: #333232;
position: relative;
z-index: 10;
}
with
* {
font-family: "Raleway", sans-serif;
color: #333232;
position: relative;
}
just remove z-index
for all elements,i think you have set z-index for individual elements.Then no need to set for all elements.
Upvotes: 1
Reputation: 375
This might point you in the right direction or help debug anyway - see attached screenshot. Looks like it has to do with the height of your .row
element which wraps the header. If you increase the height you can see the menu persists as you mouse over all elements in it.
If you are triggering the show/hide visibility with the .row element, it makes sense that as your mouse moves off it, the menu is hidden again. If you need further help, please provide the JavaScript and CSS you're using to trigger the interaction.
Upvotes: 0