bootstrap li links not working on the server - php

Question

menu REPORT is not working (links) while TOOLS and other dropdown menus are working (moving to other pages). why is the REPORT menu is working locally but not on the ubuntu server?
both of them uses the same structure but looks different because in styling
ADDITIONAL:
when you click the li tag, example: BY TYPE . it will go to rep_handle.php. then from rep_handle.php it will move to another location with stat_type VARIABLE to date_handler.php. but it just stop to stat_type.php.
does it has conflict with my CSS? please advise.. thanks
REPORT
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Reports </a>
<ul class = "dropdown-menu">
<li class="library">
<a class = "dropdown-toggle" href = "#"> Library </a>
</li>
<li class="libraryli divider" style=""></li>
<li class="libraryli dropdown-submenu" style="">
<a class = "dropdown-toggle" href = "#">  • Yearly </a>
<ul class = "dropdown-menu">
<li> By Type</li>
<li> By <?php echo $CS; ?></li>
</ul>
</li>
<li class="libraryli dropdown-submenu" style="">
<a class = "dropdown-toggle" href = "#">  • TRW </a>
<ul class = "dropdown-menu">
<li>Top Visitors</li>
<li> By Section</li>
<li>Comparison By Type</li>
<li> Comparison By <?php echo $CS; ?></li>
</ul>
</li>
<li class="libraryli divider" style="display:none;"></li>
<li> Service Days</li>
<li> Records</li>
</ul>
JS
<script>
$(document).ready(function(){
$('.dropdown-submenu a.dropdown-toggle').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
$('.dropdown-submenu a.dropdown-toggle').not(this).next('ul').hide();
});
});
</script>
<script>
$(document).ready(function(){
$('.library').on("mouseover", function(e){
$(this).siblings('.libraryli').show();
e.stopPropagation();
e.preventDefault();
$('span.caret-pr').addClass("caret-reversed");
});
$('.library').on("click", function(e){
$(this).siblings('.libraryli').toggle();
e.stopPropagation();
e.preventDefault();
$('span.caret-pr').toggleClass("caret-reversed");
});
});
</script>
CSS
.dropdown-submenu
{
position: relative;
}
.dropdown-submenu>.dropdown-menu
{
top: 0;
left: 100%;
margin-top: -6px;
margin-left: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu
{
display: block;
}
.dropdown-submenu>a:after
{
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 4.5px 0 4.5px 4.5px;
border-left-color: #000;
margin-top: 4.5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after
{
border-left-color: #000;
}
.dropdown-submenu.pull-left
{
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu
{
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.caret-pr
{
display: block;
content: " ";
float: right;
width: 0;
height: 0;
margin-top: 6px;
margin-right: -10px;
border-top: 5px solid ;
}
.caret.caret-reversed
{
border-top-width: 0;
border-bottom: 5px solid ;
}
.libraryli
{
background-color:#f5f5f5;
}
</style>