/*add this code in your primary menu in functions.php. the code will look like*/

function register_menu() {
register_nav_menu('secondary', __('Secondary Menu', 'framework'));
}


/*add this code in footer.php or where you want to show. you can change the CSS class or ID as per your stylesheet*/

<div class="main-menu-wrapper-footer">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <nav class="navigation1">
              <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'sf-menu', 'container' => '' ) ); ?>
            </nav>
          </div>
        </div>
      </div>
    </div>

    /*the CSS i've used*/

    .navigation1{
	height:50px;
	text-align:center;
}
.navigation1 > ul{
	margin:0;
	list-style-type:none;
}
.navigation1 > ul > li{
	float:left;
	font-size:15px;
	position:relative; left:25%;
}
.navigation1 > ul > li i{
	font-size:11px;
	margin-left:5px;
}
.navigation1 > ul > li > a{
	padding:15px 22px;
	display:block;
	text-decoration:none;
	border-right:1px solid rgba(0,0,0,.05); color:#fff;
}
.navigation1 > ul > li:first-child > a{
	border-left:1px solid rgba(0,0,0,.05);
}
.navigation1 ul > li:hover > a, .navigation1 ul > li.current_menu_item > a{
	border-top-width:3px;
	border-top-style:solid;
	padding:12px 22px 15px 22px;
	background:#fff; color:#000;
}
.navigation1 > ul > li ul{
	position:absolute;
	margin:0;
	list-style-type:none;
	top:100%;
	left:0;
	z-index:999;
	display:none;
	min-width:100%;
	height:auto;
	background:#fff;
	text-align:left;
	box-shadow:0 2px 2px rgba(0,0,0,.3);
}
.navigation1 > ul > li:hover ul{
	display:block;
}
.navigation1 > ul > li > ul li{
	line-height: normal;
	font-size:14px;
	position:relative;
}
.navigation1 > ul > li > ul li > a{
	display:block;
	padding:10px 25px;
	border-bottom:1px solid #f8f7f3;
	white-space:nowrap;
	text-decoration:none;
}
.navigation1 > ul > li > ul > li:hover > a, .navigation1 > ul > li > ul > li > ul > li:hover > a{
	text-decoration:none;
	padding:10px 25px;
	color:#fff;
	border-top:0;
}
.navigation1 > ul > li > ul li:last-child a{
	border-bottom:0;
}
.navigation1 > ul > li > ul li ul{
	margin:0;
	list-style-type:none;
	left:100%!important;
	top:0;
	min-width: inherit;
	position:absolute;
	box-shadow:0 2px 2px rgba(0,0,0,.3);
}