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;
}
Добавить position: relative;
на #navitation li
. И удалите position: positive;
от ul.hoverMenu, ul.hoverMenu ul
.