A CodePen by Jitendra Vyas.

index.html

<ul class="nav site-nav cf">
         <li><a href="#"><span class="bot-arrow"></span>link1</a></li>
         <li><a href="#"><span class="bot-arrow"></span>link2</a></li>
         <li><a href="#"><span class="bot-arrow"></span>link3</a></li>
         <li><a href="#"><span class="bot-arrow"></span>link4</a></li>
         <li class="flyout">
                <a href="#">link5</a>
                <!-- Flyout -->
                <ul class="flyout-content nav stacked">
                    <li><a href="#">BusBusBusBusBusBusBusBusBusBusBusBusBusBussssssssssss</a></li>
                    <li><a href="#">xxxxxx</a></li>
                    <li><a href="#">xxxxxxxxxx</a></li>
                    <li><a href="#">xxxxxxxxxxx</a></li>
                </ul>

            </li>
         <li><a href="#"><span class="bot-arrow"></span>link6</a></li>
         <li class="flyout">
                <a href="#">More</a>
                <!-- Flyout -->
                <ul class="flyout-content nav stacked">
                    <li><a href="#">xxxxxxxx</a></li>
                    <li><a href="#">xxxxxxxx</a></li>
                    <li><a href="#">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></li>
                   
                </ul>

            </li>
</ul>

style.scss

@import "compass";


.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/*------------------------------------*\
    $HOUSEKEEPING
\*------------------------------------*/
/**{ margin:0; padding:0; }*/
ul.nav{
    margin-bottom:1.5em;
    margin-left:1.5em;
}

ul.nav{
    list-style:none;
    margin-left:0 ;
    padding-left: 0
}
.nav > li,
.nav > li > a{
    display:inline-block;
    *display:inline;
    zoom:1;

}

.stacked > li{
    display:list-item;
}
.stacked > li > a{
    display:block;
}

.flyout,
.flyout-alt{
    position:relative;
}

.flyout > a {background:url(/images/submenuhoverarrow23.png) no-repeat right center;padding-right:28px !important}

.flyout > a:hover {background:url(/images/submenuhoverarrow2-white.png) no-repeat right center;padding-right:28px !important}

li.flyout:hover {padding-top:0; padding-bottom:0;}

.flyout-content{
    /* Position the flyouts off-screen. This is typically better than `display:none;`. */
    position:absolute;
    top:120%;
    left:-99999px;
    /**
     * Even though they are out of document flow, lots of nested flyouts can
     * eventually force scroll bars to appear as they become taller than the viewport.
     * We can undo this effect by giving them zero height.
     */
    height:0;
    overflow:hidden;
}



/**
 * Bring the flyouts into view when you hover their parents.
 * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’ (`.flyout-alt`).
 */
/* Regular flyouts sit all the way from the top, flush left. */
.flyout:hover > .flyout-content{
    left:0;
}
/* Alternative flyouts sit all the way from the left, flush top. */
.flyout-alt:hover > .flyout-content{
    top:0;
    left:100%;
}
.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content{
    /* Give the flyouts their height back once they come into view. */
    height:auto;
    overflow:hidden;
}


/*------------------------------------*\
    $SITE-NAV
\*------------------------------------*/
/**
 * Site nav specific styling.
 * Extends `.nav{}`
 */
.site-nav{
    font-size:14px !important;
    font-family:Droid sans !important;
    // needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(246,230,180); // Old browsers
@include filter-gradient(#f6e6b4, #ed9017, vertical); // IE6-8
// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%));



    border-bottom:2px solid #a13424 !important;
    padding: 0.261em 0 !important;
    background: #fbfbfb\9;
    position: relative ;
    z-index: 602;
    border-top:1px solid #e4e4e3;
    border-right:1px solid #e4e4e3;
    border-left:1px solid #e4e4e3;
}


.site-nav > li {float: left;
    border-left: solid 1px #fff;
    border-right: solid 1px #e4e4e3;}

.site-nav a{
    line-height:1 ;
    color:#333;
    white-space:nowrap;
    padding: .6em .7em ;
    margin: -.35em 0;
    display:block;
    padding-bottom: .5em;
    font-family:Droid sans !important; }

.site-nav > a {position:relative}


.site-nav > li:first-child { border-left: none; }
.site-nav > li:last-child, .site-nav > li.last { border-right: none; }



/*--- SITE-NAV FLYOUTS ---*/
.site-nav .flyout:hover > a /* [1] */,
.site-nav .flyout-alt:hover > a /* [1] */,
.site-nav a:hover, .site-nav a.active_nav  {
    color:#fff;
    text-decoration:none;
    background: #c7573c;
// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(169,3,41); // Old browsers
@include filter-gradient(#a90329, #6d0019, vertical); // IE6-8
// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%));

    font-size:14px !important;
    font-family:Droid sans !important;
    background: #c7573c\9;
}



.site-nav .flyout:hover > a /* [1] */,
.site-nav .flyout-alt:hover > a /* [1] */{

    background: url(/images/submenuhoverarrow2-white.png) no-repeat right center, 
rgb(255,48,25); // Old browsers
@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-8
// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));




}
.site-nav > li > a {position:relative}

.site-nav a:hover .bot-arrow, .site-nav a.active_nav .bot-arrow { display:block;position:absolute; background:url(/images/brownarrow.png) no-repeat center center;padding-bottom:9em;width:8px;height:4px;z-index:900;bottom:-67px;left:45%}
/**
 * Add an indicator to any flyout parents in the site nav to show there’s a flyout.
 */
.site-nav .flyout-alt > a:after{
    content:" »";
}



.site-nav .flyout-content{
    border:1px solid #e4e4e3;
    /*  width:100%;*/
    height:100%;
    min-width:100%;
    *width:170px;
    box-shadow: 8px 6px 10px rgba(65, 65, 65, 0.45);

}



.site-nav > li > a{
    border-left-width:0px;
}

.site-nav > li:first-child > a{
    border:none;
}
/*.site-nav .flyout-content{
     border-width:1px 0 0 1px; 
}*/
.site-nav .flyout-content a{
    border-bottom-width:0px;
    background-color:#fafafa;color:#333;border-left:1px solid #fff;border-right:1px solid #fff;padding: .8em 0.4em;border-bottom:1px solid #333;
    width:100%;
    overflow: auto !important
}

.site-nav .flyout-content a:hover{
    border-bottom:1px solid #e4e4e3;
    background-color:#e4e4e3;color:#333;
    background-image: none;
    *background-color:#e4e4e3 !important
}

.site-nav .flyout-alt:hover > .flyout-content{
    top:-1px;}


*:first-child+html .site-nav {padding-bottom: 0 !important; background: #fbfbfb;}

.lt-ie9 .site-nav{background: #fbfbfb;}

.lt-ie9 .site-nav a:hover, .lt-ie9 .site-nav a.active_nav {background: #c7573c;}

/**:first-child+html .site-nav .flyout-content a {overflow: auto !important}*/

.lt-ie8 .site-nav .flyout-content a:hover {background-color:#e4e4e3 !important;}