html - 如何使我的水平导航栏成为下拉菜单？

Question

我尝试按照教程制作水平下拉导航栏，但它们从未居中，我不知道如何将它们居中。我尝试朝相反的方向前进，首先将导航栏居中，然后尝试将其设为下拉菜单，尽管这似乎会把所有东西都扔掉。这是我的代码。

编辑:我遇到的问题是加载页面时会显示子菜单以及一个元素符号点，我确信可以通过将列表样式设置为无来解决这个问题，但我不是确定这应该在 CSS 中的什么位置。

我正在尝试创建类似于 THIS 的菜单.我知道这使用了 joomla 而我不是。

#header {
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
#footer {
  height: 85px;
  padding-top: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#menu {
  margin: 0 auto;
  display: inline-block;
  list-style: none;
  padding: 0;
  border-top: 1 solid #ccc;
  border-left: 1 solid #ccc;
  border-bottom: 1 solid #ccc;
}
#menu li {
  float: left;
}
#menu li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  font-weight: bold;
}
#menu li a:hover {
  color: #c00;
}

<ul id="menu">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Kandi</a>
    <ul>
      <li><a href="#">Claim Kandi</a>
      </li>
  </li>
  <li><a href="#">Events</a>

  </li>
  <li><a href="#">Artists</a>

  </li>
  <li><a href="#">Community</a>
  </li>
  <li><a href="#">Merchandise</a>
  </li>
  </ul>

Answer 1

添加此 CSS:

#menu, #menu ul {
    margin:0 auto;
    padding:0;
}
#menu li {
    float: left;
    position: relative;
    list-style: none;
}

#menu > li:hover > ul {
    display: block;
}
#menu > li > ul {
    display: none;
    position: absolute;
}
#menu li a {
    white-space: nowrap;
}

http://jsfiddle.net/tcKvH/1/