плавное подчеркивание не могу доработать

[gordy]

сразу к вопросу, создаю плавное подчеркивание ссылок, выходит корява, как показано на скрине



как сделать чтоб плавное подчеркивание происходило во всех блоках и сделать стрелочки (на скрине выделил красным, что мне нужно) заранее спасибо


вот код ссылок

/* SubList Arrow */

#main-nav ul li.menu-item-has-children:after,
#main-nav ul li.mega-menu:after{
    border-top-color: #ddd;
}

#main-nav ul ul li.menu-item-has-children:after{
    border-left-color: #ddd;
}

#main-nav ul > li.menu-item-has-children:hover > a:after,
#main-nav ul > li.mega-menu:hover > a:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 36px;
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent #fff;
    display: block;
    width: 0;
    z-index: 200;
    -webkit-animation: fadeInDown .2s ease-in ;
       -moz-animation: fadeInDown .2s ease-in ;
            animation: fadeInDown .2s ease-in ;
}

#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-item a:hover,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-menu-parent a:hover,
#main-nav ul ul li.current_page_parent a,
#main-nav ul ul li.current_page_parent a:hover,
#main-nav ul ul li.current-page-ancestor a,
#main-nav ul ul li.current-page-ancestor a:hover {
    border-width: 1px !important;
}

/* Remove Arrows from the Sub Sub Menus */

#main-nav ul ul > li.menu-item-has-children:hover > a:after,
#main-nav ul ul > li.mega-menu:hover > a:after,
#main-nav ul li .mega-menu-block ul.sub-menu:before {
    display: none;
}

#main-nav ul > li.current-menu-item.menu-item-has-children:hover > a:after,
#main-nav ul > li.current_page_parent.menu-item-has-children:hover > a:after {
    top: 45px;
}

#main-nav ul ul.sub-menu {
    width: 200px;
    z-index: 250;
}

#main-nav ul ul ul.sub-menu,
#main-nav ul ul li.current-menu-item ul,
#main-nav ul ul li.current_page_parent ul,
#main-nav ul ul li.current-menu-parent ul,
#main-nav ul ul li.current-page-ancestor ul {
    top: -2px;
}

#main-nav ul .mega-menu-block ul ul.sub-menu,
#main-nav ul .mega-menu-block ul li.current-menu-item ul,
#main-nav ul .mega-menu-block ul li.current_page_parent ul,
#main-nav ul .mega-menu-block ul li.current-menu-parent ul,
#main-nav ul .mega-menu-block ul li.current-page-ancestor ul {
    top: 0;
}

#main-nav .menu-sub-content {
    display: none;
    padding: 0;
    position: absolute;
    z-index: 205;
    border-top: 2px solid #fff;
    background: #4359fe;
    color:#999;
    -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius : 3px;
       -moz-border-radius-bottomright : 3px;
       -moz-border-radius-bottomleft  : 3px;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius : 3px;

}

#main-nav ul li.current-menu-item ul,
#main-nav ul li.current-menu-parent ul,
#main-nav ul li.current_page_parent ul,
#main-nav ul li.current-page-ancestor ul {
    top: 52px;
}

#main-nav ul ul li,
#main-nav ul ul li:first-child {
    background: none !important;
    width: 100%;
    border: 0 none;
/*    border-bottom: 1px solid #333;*/
    font-size: 12px;
    height: auto !important;
    margin: 0 !important;

    color: #fff; /*задаём цвет ссылки*/
    cursor: pointer;
    line-height: 1; /*задаём высоту строки*/
    text-decoration: none; /*убираем подчёркивание*/
}


#main-nav ul ul li,
#main-nav ul ul li:after {
    display: block;
    left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
    width: 0;/*задаём длинну линии до наведения курсора*/
    height: 2px; /*задаём ширину линии*/
    background-color: #fff; /*задаём цвет линии*/
    content: "";
    transition: width 0.7s ease-out; /*задаём время анимации*/
}

#main-nav ul ul li,
#main-nav ul ul li:hover:after,
#main-nav ul ul li,
#main-nav ul ul li:focus:after {
    width: 100%  /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}