创建类似于下图的导航

Question

我正在尝试创建一个类似于附加图片的导航菜单，但我遇到了CSS问题。我有一个基本的嵌套无序列表，但我无法弄清楚如何设置它看起来尽可能接近规范。任何帮助/链接将不胜感激。

Answer 1

nav {
  border-bottom:1px solid #ccc;
}
nav ul {
  list-style:none;
  padding:0.35em;
  margin:0 0.5em;
}
nav li {
  border-right:1px solid black;
  display:inline-block;
  padding:0.15em 0.25em;
  position:relative;
}
nav li:first-child {
  border-left:1px solid black;
}
nav ul ul {
  background:white;
  border:1px solid #ccc;
  box-shadow:2px 2px 4px rgba(0,0,0,0.5);
  display:none;
  left:-0.25em;
  min-width:200px;
  padding:0.5em;
  position:absolute;
  top:1.5em;
}
nav li:hover {
  font-weight:bold;
}
nav li:hover ul {
  font-weight:normal;
}
nav li:hover ul {
  display:block;
}
nav li li {
  border:none !important;
  display:block;
  margin:0;
  padding:0;
  white-space:nowrap;
}

<nav>
  <ul>
    <li>Item 1
      <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
        <li>Subitem 3</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</nav>