title: How can I make my dropdown menus stay visible on hover?
body: <p>I'm not sure why, but my dropdown menus refuse to stay on the screen when hovering over them. They work fine when I make them clickable with <code>:focus</code> in the CSS with this:</p>
  <blockquote>
  <p>.dropdown &gt; .link:focus + .dropdown-menu</p>
  </blockquote>
  <p>But, I want them to work on hover. But when I set it to the following, the dropdown disappears as soon as you take the mouse off the menu header:</p>
  <blockquote>
  <p>.dropdown &gt; .link:hover + .dropdown-menu</p>
  </blockquote>
  <p>Here is the code on JSFiddle ---&gt; <a href="https://jsfiddle.net/L8u96pbr/" rel="nofollow noreferrer">https://jsfiddle.net/L8u96pbr/</a></p>
  <p>What can I change to make it work?</p>