Как сделать плавный переход по пунктам меню?
Это называется lavalamp menu.
Вот тут есть примеры с вертикальным меню.
Я так понял нужна полосочка которая ездит в выпадающем. Сделано оно там вообще не на after. Если проанализировать код - там есть span, который absolute относительно всего выпавшего блока relative собственно (я не запариваюсь с объяснением, для человека который понимает более менее в вёрстке всё это и так ясно, так что если что не понятно - в комментах переспрашивайте). Логика - при наведении на тот или иной элемент узнавать его высоту и его расстояние от начала родительского элемента (с помощью jquery это делается в 2 счета вообще). Дальше задача просто сдвинуть на нужное количество px ваш бегунок. С ходу как рассчитать расстояние сверху имея высоту и расстояние элемента от начала родителя - я честно формулу не придумаю, так как спать хочу. Тут самостоятельно вам подумать стоит ну или пилить все пункты меню одинаковой высоты и опускать элемент на количество px сверху + там ну 3px (количество "+ там ну" узнаете самостоятельно, просто сдвиньте ваш бегунок сначала на количество px сверху {я под этим подразумеваю расстояние от в целом всего блока, который является выпадающим до элемента, на который навели} а потом спустите с помощью инспектора на середку вашего элемента и посчитайте на сколько спустили). Логика такая. Делайте сами, это будет интересно, а я спать. Не получится - пишите. Запилю на codepen иль ещё где и скину ссыль сюда, но уже завтра или когда свободное время будет.
Ссылка на скрипт от Алексей  выглядит чет очень стремно, некрасивое перетекание вообще там.