I am trying to put a drop down on hover NAV on subpages of a site. The crazy thing is that it works as long as 3.3.0bootstrap.min.css isn’t linked to the page. However, this causes other problems.
Any ideas of what I did wrong?
http://codepen.io/ahemloc/pen/XKLdAN?editors=1100
EDIT: Actually… it doesn’t look like you’re trying to use bootstrap for the navbar at all… so that’s not the issue. Are you still having the same problem? Can you explain how it’s “not working”?
ORIGINAL: The Bootstrap dropdown menu uses Javascript to run. If you go over to the Javascript panel, click on the “settings” icon and quick-add “Bootstrap” (in the “Add External Javascript” section), that should fix it.
The menus drop down but each menu for Popular, Basic, etc all drop down behind the Tool:Add Prefix and/or Suffix into Each Line installed on the page.
I’m not sure what’s causing it - I tried commenting out your bootstrap link and the menu divs still dropped down behind the others - but there’s an easy solution, at least. There’s a css property z-index that controls how positioned divs layer. An element with a higher z-index will stack higher than a div with a lower z-index. If you add z-index: 1 at .dropdown:hover .dropdown-content, that should force the menu divs to open up in front of the other content on the page.
Thank you AgathaLynn. The z-index: 1 suggestion was a huge help!