why does my menu overlay the page conrent

Rebuild the site with a responsive framework like Bootstrap.

Or consider WordPress with family tree plugins. It might make this a lot simpler you & more interactive for your users.

https://wordpress.org/plugins/tags/family-tree/

In short, your menu doesn’t have a z-index so it’s just showing behind your content. Adding a z-index would fix that. And your content has a float which is why it overlaps the red outline of your header. If you remove the float it ends up within that frame because the float is not really necessary here.

Although I will say your site is not mobile friendly and despite these two minor adjustments, your page could use a refresh in its code/layout to be more modern and responsive for your visitors so it renders properly on all devices. Have you considered a bigger update to your layout?