Top navbar have bootstrap navbar structure with some modifications (submenus):
<!-- Navbar -->
<nav class="navbar-youplay navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="off-canvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" alt="">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-hover ">
<a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
Store <span class="caret"></span> <span class="label">games</span>
</a>
<div class="dropdown-menu" style="width: 320px;">
<ul role="menu">
<li><a href="store-1.html">Store Style 1</a>
</li>
<li><a href="store-2.html">Store Style 2</a>
</li>
<li><a href="cart.html">Cart</a>
</li>
</ul>
<!--
-->
<ul role="menu">
<li><a href="store-product-1.html">Product Style 1</a>
</li>
<li><a href="store-product-2.html">Product Style 2</a>
</li>
<li><a href="checkout.html">Checkout</a>
</li>
</ul>
</div>
</li>
<li class="dropdown dropdown-hover ">
<a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
Blog <span class="caret"></span> <span class="label">news</span>
</a>
<div class="dropdown-menu" style="width: 320px;">
<ul role="menu">
<li><a href="blog-1.html">Blog Style 1</a>
</li>
<li><a href="blog-2.html">Blog Style 2</a>
</li>
<li><a href="blog-3.html">Blog Style 3</a>
</li>
</ul>
<!--
-->
<ul role="menu">
<li><a href="blog-post-1.html">Blog Post 1</a>
</li>
<li><a href="blog-post-2.html">Blog Post 2</a>
</li>
<li><a href="blog-post-3.html">Blog Post 3</a>
</li>
</ul>
</div>
</li>
<li class="dropdown dropdown-hover active">
<a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
Features <span class="caret"></span> <span class="label">full list</span>
</a>
<div class="dropdown-menu" style="width: 320px;">
<ul role="menu">
<li><a href="components.html">Components</a>
</li>
<li><a href="user-profile.html">User Profile</a>
</li>
<li><a href="forums.html">Forums</a>
</li>
<li><a href="forums-topics.html">Forums Topics</a>
</li>
<li><a href="forums-single-topic.html">Single Topic</a>
</li>
</ul>
<!--
-->
<ul role="menu">
<li><a href="coming-soon.html">Coming Soon</a>
</li>
<li class="active"><a href="contact.html">Contact Us</a>
</li>
<li><a href="search.html">Search</a>
</li>
<li><a href="login.html">Login</a>
</li>
<li><a href="404.html">404</a>
</li>
<li><a href="blank.html">Blank</a>
</li>
</ul>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown dropdown-hover ">
<a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
John Doe <span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span>
</a>
<div class="dropdown-menu">
<ul role="menu">
<li><a href="../documentation">Documentation</a>
</li>
<li><a href="http://themeforest.net/item/youplay-game-template-based-on-bootstrap/11306207?ref=_nK">Purchase</a>
</li>
<li class="divider"></li>
<li><a href="user-profile.html">Profile <span class="badge pull-right bg-warning">13</span></a>
</li>
<li><a href="cart.html">My Cart <span class="badge pull-right bg-default">3</span></a>
</li>
<li class="divider"></li>
<li><a href="login.html">Log Out</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="#!">More..</a>
<div class="dropdown-menu">
<ul role="menu">
<li><a href="#!">3rd level</a>
</li>
<li><a href="#!">3rd level</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a class="search-toggle" href="search.html">
<i class="fa fa-search"></i>
</a>
</li>
<li class="dropdown dropdown-hover dropdown-cart">
<a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
<i class="fa fa-shopping-cart"></i>
</a>
<div class="dropdown-menu" style="width: 300px;">
<div class="row youplay-side-news">
<div class="col-xs-3 col-md-4">
<a href="#" class="angled-img">
<div class="img">
<img src="assets/images/game-bloodborne-500x375.jpg" alt="">
</div>
</a>
</div>
<div class="col-xs-9 col-md-8">
<a href="#" style="text-decoration: none;" class="pull-right mr-10"><i class="fa fa-times"></i></a>
<h4 class="ellipsis"><a href="#">Bloodborne</a></h4>
<span class="quantity">1 × <span class="amount">$50.00</span></span>
</div>
</div>
<div class="row youplay-side-news">
<div class="col-xs-3 col-md-4">
<a href="#" class="angled-img">
<div class="img">
<img src="assets/images/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
</div>
</a>
</div>
<div class="col-xs-9 col-md-8">
<a href="#" style="text-decoration: none;" class="pull-right mr-10"><i class="fa fa-times"></i></a>
<h4 class="ellipsis"><a href="#">Kingdoms of Amalur</a></h4>
<span class="quantity">1 × <span class="amount">$20.00</span></span>
</div>
</div>
<div class="ml-20 mr-20 pull-right"><strong>Subtotal:</strong> <span class="amount">$70.00</span>
</div>
<div class="btn-group pull-right m-15">
<a href="#" class="btn btn-default btn-sm">View Cart</a>
<a href="#" class="btn btn-default btn-sm">Checkout</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- /Navbar -->