Doxi: Забудьте про Попова, это халтура. Как уже выше сказали - codeacademy. Если с англ. плохо, то вот российский аналог htmlacademy. За JS пока не беритесь, изучите сначала хорошо HTML/CSS. Дэвид Флэнаган - JavaScript. Подробное руководо 6е... - отличная книга по JS. Если хотите видео курсы, смотрите youtube каналы sorax и loftblog, для начинающих пойдет.
Зависит от человека, если схватывает быстро, то не долго, если мозг тормозит, соответственно медленней ). У меня ушло примерно полтора года чтобы изучить верстку и окружающие её технологии, типо препроцессоров, jquery и т.д. HTML и CSS изучить можно вообще за месяц-два, но знать названия свойств и тегов не достаточно. Нужно понимать что ты пишешь. Британские ученые установили, что человеку нужно 7т часов чтобы стать профессионалом в любом деле )
Тут нужно либо менять сам эффект анимации, например чтоб блок выезжал, либо через jquery определять высоту вложенного ul, и подставлять это значение при ховере, но это тоже плохой вариант. И кстати, зачем ты используешь animation, если можно обойтись простым transition, кода меньше а эффект будет тот же.
Только хотел предложить такой вариант), но он плох тем что если клиент добавит еще пункты, то проблема вернется. А суть проблемы в высоте, почитай как работает свойство height с процентами и поймешь.
@RainMEN что-то не видно чтобы вы залили на сайт.
Просто укажите для класса .foo min-width: 1020px; можно прямиком body задать.
А по поводу "почему не работает без min-width", по умолчанию блочный элемент имеет значение width: auto; т.е. тянется на всю ширину, соответственно ширина уменьшается при ресайзе браузера. А min-width позволяет зафиксировать ширину элемента на указанном минимальном значении.