.main_menu when (@menu-main) {
    position : relative;
    z-index  : 11;

    & when not(@nav-color = @link-color) {
        color : @nav-color;
    }

    & > li {
        float    : left;
        position : relative;

        &:hover {
                //color : @brand-primary;

            ul {
                display : block;
            }
        }
        // TODO Why we had this property for the tag 'a'?
        //& > a when (@responsive), (@adaptive){
        //    float : left;
        //}
        >a {
            &.current, &:hover {
                & when (@nav-bg-li-hover = @nav-bg-li-current) {
                    &:extend(.main_menu > li:hover);
                    background:darken(@brand-primary-second, 10%);
                }


                & when not(@nav-color-li-hover = @nav-color-li-current) {
                    color : #fff;
                }
            }
        }

    }
    a {
        display         : block;
        padding         : 20px;
        text-decoration : none;
        white-space: nowrap;
        & when not(@nav-color = @link-color) {
            color : inherit;
        }


    }



    ul {
        position   : absolute;
        left       : 0;
        top        : 100%;
        z-index    : 0;
        display    : none;
        width      : 300px;
        background : @nav-drop-down-list-bg;
        & when not(@nav-drop-down-list-color = @nav-color) {
            color : @nav-drop-down-list-color;
        }
        .box-shadow(0 3px 5px @gray-dark);

        & when (@mobile-menu) {
            &.open:extend(.mobile-menu ul.open) {
            }
        }

        li {
            float : none;

            &:hover {
                & when not(@nav-drop-down-list-bg-hover = @nav-bg-li-hover)
                   and not(@nav-drop-down-list-bg-hover = @nav-drop-down-list-bg) {
                    background : @nav-drop-down-list-bg-hover;
                }
                & when not(@nav-drop-down-list-color-hover = @nav-drop-down-list-color)
                   and not(@nav-drop-down-list-color-hover = @nav-color-li-hover) {
                    color : @nav-drop-down-list-color-hover;
                }
            }

            a {    padding: 6px 18px;
                &.current {
                    & when (@nav-drop-down-list-color-hover = @nav-drop-down-list-color-current) {
                        &:extend(.main_menu ul li:hover);
                    }

                    & when not(@nav-drop-down-list-bg-current = @nav-drop-down-list-bg)
                       and not(@nav-drop-down-list-bg-current = @nav-drop-down-list-bg-hover) {
                        background : @nav-drop-down-list-bg-current;
                    }
                    & when not(@nav-drop-down-list-color-current = @nav-drop-down-list-color)
                       and not(@nav-drop-down-list-color-current = @nav-drop-down-list-color-hover) {
                        color : @nav-drop-down-list-color-current;
                    }
                }
                &:hover {
                    color: @brand-primary-second;
                }
            }
        }
    }
}