jQuery('.submenu').hover(function() {
jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function() {
jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");
<ul class="nav nav-pills">
<li><a href="#">Dashboard</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Missions <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<?php echo site_url('filecontroller/create'); ?>">Create new mission</a></li>
<li><a href="<?php echo site_url('filecontroller/ShowallTMR'); ?>">List of missions</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Manage users <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<?php echo site_url('auth/createUser'); ?>">Create new user</a></li>
<li><a href="<?php echo site_url('backend/users'); ?>">List of all user</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Reports<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown submenu"><a href="#">Static reports</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li><a href="<?php echo site_url('rptman/trucks_waiting_for_upload') ?>">Trucks waiting for upload</a></li>
<li><a href="<?php echo site_url('rptman/trucks_waiting_for_download') ?>">Trucks waiting for download</a></li>
<li><a href="<?php echo site_url('rptman/trucks_with_military_escort') ?>">Trucks with Military Escort</a></li>
<li><a href="<?php echo site_url('rptman/trucks_with_PSC_escort') ?>">Trucks with PSC Escort</a></li>
<li><a href="<?php echo site_url('rptman/list_of_remission_without_memo') ?>">List of Remission without Memo</a></li>
<li><a href="<?php echo site_url('rptman/list_of_remission_with_memo') ?>">List of Remission with Memo</a></li>
<li><a href="<?php echo site_url('rptman/list_of_roundup_trips') ?>">List of Round Up Trips</a></li>
<li><a href="<?php echo site_url('rptman/total_closed_mission') ?>">Total Closed Mission</a></li>
<li><a href="<?php echo site_url('rptman/next_day_mission_by_dist_without_driver') ?>">Total Missions of next days by Distributor without Drivers Assignment</a></li>
<li><a href="<?php echo site_url('rptman/next_day_mission_by_dist_without_ITV') ?>">Total Missions of next days by Distributor without ITVs Assignment</a></li>
<li><a href="<?php echo site_url('rptman/missions_sheets_rolled_over') ?>">Mission Sheets Rolled Over</a></li>
<li><a href="<?php echo site_url('rptman/missions_sheets_not_turned_into_client') ?>">Mission Sheets not Tunred in to Client</a></li>
<li><a href="<?php echo site_url('rptman/missions_awaiting_usg_escort') ?>">Missions Awaiting USG Escort</a></li>
<li><a href="<?php echo site_url('rptman/ardd_report') ?>">ARDD Report</a></li>
<li><a href="<?php echo site_url('rptman/container_report') ?>">Container Report</a></li>
<li><a href="<?php echo site_url('rptman/daily_collective_ping_report') ?>">Daily Collective Ping Report</a></li>
</ul>
</li>
<li class="dropdown submenu"><a href="#">Online reports</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li><a href="#">Test report-1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Setting</a>
</li>
</ul>
.submenu-show
{
border-radius: 3px;
display: block;
left: 100%;
margin-top: -25px !important;
moz-border-radius: 3px;
position: absolute;
webkit-border-radius: 3px;
}
.submenu-hide
{
display: none !important;
float: right;
position: relative;
top: auto;
}
.navbar .submenu-show:before
{
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .submenu-show:after
{
border-bottom: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-top: 6px solid transparent;
left: 10px;
left: -6px;
top: 11px;
}
External resources loaded into this fiddle: