Невозможно получить подменю, чтобы зависать в родительском меню через CSS

0

HTML-новичок здесь!

Я создаю навигацию по меню, где пользователь будет навис над выбором, и под ним будет отображаться меню.

Мне удалось заставить его появиться, когда он завис, но все подменю привязаны к одному углу сайта следующим образом: Здесь и здесь (извиняется за ужасный макет до сих пор, еще не задумался о цветовых схемах!) я также попытались отобразить: встроенный блок, но он делает подменю справа от него.

Вот 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;
}
Теги:
hover
menu

1 ответ

0
Лучший ответ

Добавить position: relative; на #navitation li. И удалите position: positive; от ul.hoverMenu, ul.hoverMenu ul.

  • 0
    Именно так, как я хотел, чтобы это работало! Спасибо тебе большое за это :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню