Dropdown menu disappears

I hadn't programed html in a long time. I was using Dreamweaver when it was part of Macromedia. One used mouseover commands to do dropdown menus. Now everything is different. I've been trying to learn how to do this using current methods.

I read that I should use "dropdown" class to create my menus. I also read, and maybe misunderstood, that:

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.

So I thought that I was using Bootstrap. My mistake if I errored. But I know that my code did not work until I linked to Bootstrap.

After reading a reply to something else I realized that I probably should not be using a hover-activated dropdown menu. So today I've changed it to a clickable dropdown menu. I like it better. I only have one issue remaining. Maybe you would be so kind as to help me.

I do not use a button, but rather a hamburger icon. But the code that I have been following assumes that you are using a button. That's critical because it includes the following script to close the dropdown when one clicks outside of it.

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Can this be changed to work with an icon instead of a button? The icon is simply a png. Or maybe you have a better suggestion.

I very much appreciate any help you can give me.

FYI, I'll be 73 in 6 weeks. I work with a very small nonprofit. I do this programing myself, rather than hiring someone not to save a few dollars, but rather to keep my mind active. But obviously I need help.

My main interest right now is re-writing the html that displays the maps and descriptions for more than 200 backcountry ski tours. Originally these were published in my books, but eventually made them available online for free. The old code used flash and that obviously needs to be replaced. Also, now we have all sizes of devices that must be accommodated. I've come up with a very, very simple design that will work on even phones. So that's what I'm doing. See www.backcountryskitours.com.

This is a flawed concept. I've never seen hover used on a small hamburger menu before. Its usually applied on a conventional navigation menu where there is more room for the hover to work properly and then only on desktop devices, hover doesnt work on mobile devices.

Because you have assigned position: absolute; to '.dropdown-content' <p> it takes it out of the normal code flow so the '.dropdown' <div> is NOT wrapped around the '.dropdown-content' <p> like you might think it is. Your problem is you have space between the hamburger icon <div> (.dropdown) and the navigation <p> ('.dropdown-content'), some caused by the default margin on the <p> tag and any small amount of vertical space means when the mouse is moved outside of the hamburger <div> the '.dropdown-content' <p> will immediately close itself before you have chance to get your mouse over it, unless you are very fast.

You can adjust your code to as shown below BUT as I say its a flawed concept - as soon as you move left or right horizontally out of the hamburger <div> the menu closes - there's not enough what we call 'real-estate' for any margin of error from the users perspective, they have to move the mouse directly down in a careful vertical motion.

.dropdown {
position: relative;
display: inline;
text-align: left;
}
.dropdown-content {
position: absolute;
display: none;
font-size: 14px;
font-weight: normal;
background-color: #DCDCDC;
min-width: 225px;
z-index: 1;
margin: -2px 0 0 0;
padding: 0 0 0 10px;
}

You also should NOT be using a <p> tag to display a list of menu items, but that's for another day.