my html
<!DOCTYPE html>
<html lang="en">
<head>
<%= csrf_meta_tags %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag "bootstrap.min", media: :all %>
<%= stylesheet_link_tag "dataTables.bootstrap.min", media: :all %>
<%= stylesheet_link_tag "responsive.bootstrap", media: :all %>
<%= stylesheet_link_tag "font-awesome.min", media: :all %>
<%= stylesheet_link_tag "custom.min", media: :all %>
<%= stylesheet_link_tag "main", media: :all %>
</head>
<body>
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Facility</h3>
<ul class="nav side-menu">
<li class="active"><a href="facility-dashboard.html"><i class="fa fa-home"></i> Dashboard </a></li>
<li><a href="my-facilities.html"><i class="fa fa-cubes"></i> My Facilities </a></li>
<li><a href="statement.html"><i class="fa fa-paste"></i> Statements</a></li>
<li><a href="billing-information.html"><i class="fa fa-list-alt"></i> Billing information</a></li>
**<li><a><i class="fa fa-gears"></i> Account Setting <span class="fa fa-chevron-down"></span></a>**
<ul class="nav child_menu">
<li><a href="javascript:void(0);">One</a></li>
<li><a href="javascript:void(0);">Two</a></li>
<li><a href="javascript:void(0);">Three</a></li>
</ul>
</li>
</ul>
</div>
</div>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "bootstrap.min" %>
<%= javascript_include_tag "dataTables.bootstrap.min" %>
<%= javascript_include_tag "dataTables.responsive" %>
<%= javascript_include_tag "custom.min" %>
</body>
</html>
my application.js
//= require jquery2
//= require jquery_ujs
i found the problem here , some css class issue
