Выпадающее меню делается с помощью абсолютного позиционирования. Отступы с помощью координат top и left.
Выделенные свойства здесь лишние:
.main-menu ul {
margin: 0;
padding: 0;
list-style: none; text-decoration:underline; background-color:#ffffff;
}
Если вам пока тяжело разбираться во вложенности элементов, воспользуйтесь предложенными классами. Например, вместо селектора .main-menu ul можно использовать .sub-menu.
Также обратите внимание, что в HTML-коде нет элемента с классом .active.
Да, я смотрела по другому испытанию… По названию.
Отступы у самого подменю 10px с каждой стороны. А отступы у ссылок подменю 5px.
Вам останется добавить белый фон для подменю.
И тогда в последнем правиле изменить селектор на .main-menu.active ul
Пожалуйста, не склеивайте так свой код, трудно разбирать. Вам ведь так тоже не удобно. Вы не замечаете, что не ставите точку с запятой в конце свойства.
Громадное спасибо! Про белый фон совсем забыла, все никак понять не могла, что за странность с подменю при отображении
` html, body {
margin: 0;
padding: 0;
}