Question

HTML初学者！

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

我设法让它在悬停时出现，但所有子菜单都粘在网站的一个角落，如下所示：Here and here（为可怕的布局道歉，到目前为止还没有开始考虑配色方案！）我也尝试过显示：内联块，但它使子菜单显示在右边。

这是我目前为菜单提供的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。并从position: positive;删除ul.hoverMenu, ul.hoverMenu ul。

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

1 个答案: