如果你只使用HTML和普通JS，你可以这样做。
首先，创建一个javascript文件，并将其包含在网站上使用的每个主html文件中（例如index.html.contact.html，portfolio.html等）。
我们将此文件命名为helpers.js。
它的内容大概是这样的。

// Let's see if the HTML which is using helpers.js has its own navigation
var navigation = document.querySelectorAll("nav");
if(!navigation.length) {
    var navigation = document.createElement("nav");
} else {
    navigation = navigation[0];
}

// We'll make a centralized list of main links - the ones we want to see in the navigation
var linkList = {
  "home":"index.html",
  "portfolio":"portfolio.html",
  "about me":"about.html",
  "contact me":"contact.html"
};

// The function is here to help us populate the navigation with our links
function fillNavigation(elem, source) {
    elem.innerHTML = "";
    for(let description in source) {
        let content  = '<a href="' + source[description] + '">' + description + '</a>';
    elem.innerHTML += content;
  }
}

// We call the function, and let it work for us
fillNavigation(navigation,linkList);

这样做的一个好处是你可以在一个地方修改你的主链接列表--你不必为了修改导航而访问你网站的每一个页面，helpers.js会为你做这些。
一个运行示例（JS fiddle here，如果您想尝试一下）
x一个一个一个一个x一个一个二个一个x一个一个三个一个

EDIT对于有多级菜单的情况，可以使用类似下面的命令。如第一个例子，fiddle is available here

var navigation = document.querySelectorAll("nav");
if(!navigation.length) {
    var navigation = document.createElement("nav");
} else {
    navigation = navigation[0];
}

var linkList = {
    "home":"index.html",
    "portfolio":"portfolio.html",
    "about me":"about.html",
    "contact me":"contact.html",
    "modules":{
        "module1": {
            "lorem":"lorem.html",
            "ipsum":"ipsum.html"
        },
        "module2": {
            "foo":"foo.html",
            "bar":"bar.html"
        }
    }
};

function isObject(obj) {
  return typeof obj === 'object';
}

function renderLinks(source,flagClose) {
    let txt = "";
    for(let description in source) {
        if(isObject(source[description])) {
      txt += '<li class="parent">' + description + '<ul class="sublevel none">';
      txt += renderLinks(source[description],description);
        } else {
            let addition = flagClose ? (flagClose.trim() + '/') : ''
            txt += '<li><a href="' + addition + source[description] + '">' + description + '</a></li>';
        }
    }

  if(flagClose) {
    txt += '</ul></li>';
  }

  return txt;
}

function fillNavigation(elem, source) {
    elem.innerHTML = "";
  elem.innerHTML += renderLinks(source);
  
  // show on hover
  $("li.parent").mouseenter(function() {
    $(this).find("> ul.sublevel").removeClass("none");
  });
  
  $("li.parent").mouseleave(function() {
    $(this).find("> ul.sublevel").addClass("none");
  });
}

fillNavigation(navigation,linkList);

.none {
  display: none !important;
}
nav {
  padding: 5px;
  width: calc(100% - 10px);
  text-align: left;
  background-color: #333;
  color: #fff;
}
nav a {
  text-decoration: none;
  padding: 3px;
}
nav a:hover {
  color: red;
  transition: 0.5s;
}
li {
  list-style: none;
}
li.parent {
 position: relative;
 padding-right: 10px;
 padding-left: 5px;
}
li.parent * {
  display: block;
}
ul.sublevel {
  position: absolute;
  top: -1px; /* because of the border */
  left: 100%;
  background-color: #333;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  min-width: 100px;
  border: 1px solid #aaa;
  text-align: left;
}
li.parent, ul.sublevel {
  cursor: pointer;
}
nav li {
 display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>ok</nav>
<p>lorem ipsum sit dolor amet etc lupus in fabula homo homini lupus est similis simili gaudet bellum omnia contra omni </p>
<hr>
<p>some other stuff</p>

您会注意到与第一种情况（一级菜单）的一些不同之处：

• 修改了原始linkList，以便显示多级菜单的情况（modules/module1/link1.html、modules/module1/link2.html等）
• 函数fillNavigation也已更改-它现在包含对新函数renderLinks的调用，该函数将创建所有innerHTML
• renderLinks是一个递归函数，这使得它在你决定改变导航深度的情况下非常方便。请注意，它已经在一级和二级菜单上进行了测试。它应该可以在更多的级别上工作，但是你必须相应地调整CSS（或者稍微修改一下函数，这样你就可以有特定的CSS类，与特定的级别相连接）
• 函数renderLinks依赖于一个helper函数isObject。此函数的目的是测试我们当前处理的项是否实际上是一个子菜单。由于我们控制原始linkList及其结构，因此可以按照代码所示执行此操作。对于更复杂的情况（例如，在我们对如何形成链接列表没有或几乎没有控制的情况下，这种解决方案很可能是缺乏的）
• hover效果和子菜单的显示是通过jQuery来处理的，这没有什么特别的原因，除了我发现它更容易实现（输入更少）
• 由于我们可以有多个菜单元素，mouseenter和mouseleave只针对我们悬停的子级中的第一个子级，这也允许我们沿着悬停的路线（视觉上）行进，而无需关闭包含我们当前遍历的子级的原始顶级菜单项

这里的问题似乎是，我如何从Web浏览器读取本地文件系统。浏览器有一个FileAPI，但它不提供在没有用户输入的情况下传递本地文件系统上的文件和文件夹列表的能力。