html - 协助垂直导航

Question

我试图在我的 HTML 文档中创建垂直导航，但我似乎无法让主菜单均匀排列。这是我的垂直导航 HTML:

 <div id="navbar">
 <ul>
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a>
 <ul>
 <li><a href="#">Drop 1</a></li>
 <li><a href="#">Drop 2</a></li>
 <li><a href="#">Drop 3</a></li>
 </ul></li>
 <li><a href="#">Menu 3</a></li>
 <li><a href="#">Menu 4</a>
 <ul>
 <li><a href="#">Drop 1</a></li>
 <li><a href="#">Drop 2</a></li>
 </ul></li>
 <li><a href="#">Menu 5</a></li>
 </ul>

 </div>

还有我的 CSS:

#navbar {
margin-left: -40px; 
}

#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}

#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}

#navbar ul li:hover ul{
visibility:visible;
}

这是我的第一篇文章，如果我没有以正确的格式发表，我深表歉意。这段代码也来自一个更大的 HTML/CSS 文件，所以我只是复制/粘贴了我遇到问题的唯一部分。如果我需要发布我正在谈论的内容的屏幕截图，我可以这样做。

提前致谢!

Answer 1

演示 - http://jsfiddle.net/uab2hr50/2/

如果您希望将子菜单对齐到主菜单下方

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#navbar ul {
  border: 1px solid red;
  display: inline-block;
  padding: 6px;
}
#navbar li {
  list-style: none;
  position: relative;
  width: 209px;
  line-height: 20pt;
  cursor: pointer;
}
#navbar ul ul {
  display: none;
  padding: 0;
  border: 0;
}
#navbar ul li:hover ul {
  display: block;
}

<div id="navbar">
  <ul>
    <li><a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>

      <ul>
        <li><a href="#">Drop 1</a>

        </li>
        <li><a href="#">Drop 2</a>

        </li>
        <li><a href="#">Drop 3</a>

        </li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

      <ul>
        <li><a href="#">Drop 1</a>

        </li>
        <li><a href="#">Drop 2</a>

        </li>
      </ul>
    </li>
    <li><a href="#">Menu 5</a>

    </li>
  </ul>
</div>