无法通过 CSS 使子菜单悬停在父菜单下

Question

HTML 初学者在这里！

我正在创建一个菜单导航，用户将鼠标悬停在所选内容上，菜单将直接显示在其下方。

我设法让它在悬停时出现，但所有子菜单都粘在网站的一个角落，如下所示：Here and here（为目前糟糕的布局道歉，还没有开始考虑配色方案！）我也尝试过 display:inline-block 但它使子菜单出现在它的右侧。

这是迄今为止我为菜单准备的 HTML 和 CSS。

所有帮助和指点将不胜感激！ :)

HTML

    <ul class="hoverMenu">
      <li><a href="info.html">Information</a>
         <ul>
         <li><a href="info.html#location">Location</a></li>
         <li><a href="info.html#travel">Travel</a></li>
         </ul>
      </li>
      <li><a href="timetable.html">Timetable</a>
        <ul>
        <li><a href="classes.html">Classes</a></li>
        <li><a href="workshops.html">Workshops</a></li>
        <li><a href="dances.html">Dances</a></li>
        <li><a href="meals.html">Meals</a></li>
        </ul>
      </li>
      <li><a href="dances.html">Dance List</a></li>
      <li><a href="booking.html">Booking</a></li>
      <li><a href="contact.html">Contact Us</a ></li>
  </ul>
  </div>

CSS

    #navigation {
    float: left;
    width: 90%;
    text-align: center;
    padding: 10px;
    border: 5px double #19b2db;
    margin: 10px;
    font-family: Helvetica, Arial, "sans-serif";
    color: #001240;
}
    #navigation li {
    display: inline;
    padding: 10px;
    margin: 10px;
    color: #fff;
}
    ul.hoverMenu, ul.hoverMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: positive;
}
    ul.hoverMenu ul {
    display: none; /*initially menu item is hidden*/;
    position: absolute; /*absolute positioning is important for menu to float*/;
    width: 60px;
    padding: 0;
}
    ul.hoverMenu li:hover > ul {
    /* Hover effect for menu*/   
    display: block;
    width: 60px;
    position: absolute;
    padding: 0;
}

Answer 1

将position: relative; 添加到#navitation li。并从ul.hoverMenu, ul.hoverMenu ul 中删除position: positive;。