How do I make 2 columns of 6, with the submenus visible during hover?

Look at using a floating meny bar or have a better placement
Many of  the screens are narrow and that lends your type of layout for the user to scroll as you noted to see the options.
The other option is to have the sub-menu scaled to the screen versus fixed.
This way the user is made aware that there are more items in the submenu which they can scroll as opposed to having to scroll the main browser view and then access the submenu again

http://dhtml-menu.com/menu/dhtml-floating-menu-sample.html

I don’t like the floating menu. Would you please post a scaled menu that you mentioned above?
Thank you,
Russ

You are setting a fixed sizes.
height 600px or 100%

use percentages .

http://dhtml-menu.com/menu/rq-have-scroll-menu-bar-nothing-scroll-support.html

Instead of having the menu open below open the window up with the div position by -150 to have it open above.

http://deluxe-menu.com/data-samples/rq-css-dhtml-menu-submenu-above-support.html

i.e. in your positioning you want it to scale up, unless your menu position in the browse is at the top at which point, you want the menu to drop down.
I think your current handling is that it is not dynamic.

what IDE are you using to create these pages?

I have cpanel, using the standard editor.
I honestly don’t know what it is to position <div> to -150. I’ll do research and play with it.
Thank you,
Russ

Unfamiliar with a cpanel editor through which you are creating these? sure it is not based on a template in a content management system like wordpress, joomla, drupal, etc. etc., etc.

The point deals with your current selection the menu is a drop down feature, you need to look whether there is a way that builds the menu item when clicked to pop-up.

Your menu listing is a fixed height that accommodates all the items listed, the other deals with a dynamic menu generating javascript that makes its dimension  match the remainder of the available space ...

it looks as though you are adding a list that is then rendered in one of the CSS files/javascript...


See whether when you are editing.working on the template, does it have an option to change how the menu functions, either pops up, are is full length...

I think it is part of a template that is then displayed to the user, your choice to place this type of menu at the bottom of your page, rather at the top. is what requires the adjustment to either have the menu popip versus drop-down


You could try in the css/styles.css seems to be where you have the menu setup. you have one

The template editor should provide you an option to test whether you would add overflow-y:: scroll
...
or the item where this specific menu is needs to have it added.
Was the menu initially floating?

No template, each line from scratch in html & php.

I see, look at the cascading style sheet file that define how the menu is formed, see if you add the overflow-y: scroll.
To the menu il ul I think is how you gave it.

The other item, deals with whether the menu when clicked drips down as it currently does for you, to popup meaning the starting point is above, see if you try align bottom, to...

I think what you are looking for is a mega menu https://www.w3schools.com/howto/howto_css_mega_menu.asp you can see in that code, it is already

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Select allOpen in new window

Here is another https://codepen.io/arjunamgain/pen/YXBeLJ 

If you search for "html mega menu" you will get more options.

With that said, I think you are getter off to not have a drop down menu. Instead, just the one link for Cemeteries. Then on the Cemeteries page, you can list each cemetery in 2,3 or 4 columns.   A good reason for this method is you probably have at least half your users on some type of mobile device and dropdown menus are not always easy. 

This should do it, I'll try it & hopefully be done with this.
Thank you,
Russ

Ok, I've played with the various code ideas and others not suggested and none are really what I'd like.

So, I'd like to change my question to something that if possible would be a solution:

When hover over only a particular main menu item have the page scroll down a % and return to previous value (position) when off that item (scroll up).
Russ

Thank you for the Testimonial Russ!