element多层导航菜单，实现点击左侧导航栏，右侧显示对应页面

您可以使用HTML和CSS创建一个多层导航菜单，然后使用JavaScript来实现点击左侧导航栏时右侧显示对应页面的功能。

以下是一个基本的HTML结构：

<div class="menu">
  <ul>
    <li><a href="#">First Level Item 1</a>
      <ul>
        <li><a href="#">Second Level Item 1</a></li>
        <li><a href="#">Second Level Item 2</a></li>
        <li><a href="#">Second Level Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">First Level Item 2</a>
      <ul>
        <li><a href="#">Second Level Item 4</a></li>
        <li><a href="#">Second Level Item 5</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="content">
  <div id="page1" class="page active">Page 1 Content</div>
  <div id="page2" class="page">Page 2 Content</div>
  <div id="page3" class="page">Page 3 Content</div>
  <div id="page4" class="page">Page 4 Content</div>
  <div id="page5" class="page">Page 5 Content</div>
</div>

在上面的HTML中，我们有一个具有多个层级的导航菜单和一个内容区域。导航菜单使用无序列表和嵌套的列表项来创建多个层级。内容区域包含多个页面，每个页面具有唯一的ID和类。

接下来，我们需要使用CSS为菜单和内容区域创建样式。以下是一个示例CSS：

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  position: relative;
}

.menu li ul {
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
}

.menu li:hover > ul {
  display: block;
}

.content .page {
  display: none;
}

.content .active {
  display: block;
}

在上面的CSS中，我们使用了位置属性和伪类选择器来为菜单创建多层导航。我们还使用了display属性来控制内容区域中的页面的可见性。

最后，我们需要使用JavaScript来实现单击菜单项时显示对应页面的功能。以下是一个示例JavaScript：

var links = document.querySelectorAll(".menu a");
var pages = document.querySelectorAll(".page");

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function(e) {
    e.preventDefault();
    var href = this.getAttribute("href").replace("#", "");
    for (var j = 0; j < pages.length; j++) {
      pages[j].classList.remove("active");
      if (pages[j].getAttribute("id") === href) {
        pages[j].classList.add("active");
      }
    }
  });
}

在上面的JavaScript中，我们使用querySelectorAll()方法来获取所有菜单项和所有页面。我们使用循环和addEventListener()方法将单击事件添加到每个菜单项。当单击菜单项时，我们使用getAttribute()方法获取其href属性的值，并使用replace()方法删除#符号。然后，我们使用循环和classList属性来将active类添加到相应的页面，并从其他页面中删除它。

这样，当用户单击菜单项时，页面将会切换到相应的内容。