HTML refference code issue

After solving my first issue in my previous post No. 207716, I am going to focus on the second issue:

In my index.html there is a menu, each menu item code is like:

<li><a href="#submenu"&nbsp onclick=load_menu("./iNat_files/B_menu.html");load_data("./iNat_files/BID401.html")>Birds</a></li>

while javascript load_menu and load_data are using the fetch function as in:

    function load_menu(htmname) {
        fetch(htmname /*, options */)
            .then((response) => response.text())
            .then((html) => {
                document.getElementById("submenu").innerHTML = html;
            })
            .catch((error) => {
                console.warn(error);
            });
    }

load_menu and load_data reffer to a subfolder of the main folder.
Though I defined the folders in the repository in the correct hierarchy (iNat_files and iNat_images are subfoldres of iNat_portal) the reffrence does not work properly, as shown in next picture:

Does anyone know how to solve this issue ?