当我点击导航栏的下拉菜单时，它不会显示其子节点。这是CSS还是JS问题？
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Spanet Application</title>
<!-- Required CSS -->
<link href="@Url.Content("~/css/")style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="@Url.Content("~/css/")modal.css" rel="stylesheet" type="text/css" media="all"/>
<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- End Required CSS -->
</head>
<body style="font-family:'Ubuntu Condensed', sans-serif;">
<div class="header">
<div class="wrap">
<div class="header_top">
<div class="logo">
<a href="index.html"><img src="~/images/logo.png" alt="" style=" width: 242px;" id =" logoimg"/></a>
</div>
<div class="header_top_right">
<div class="search_box">
<span>Search</span>
<form>
<input type="text" value=""><input type="submit" value="">
</form>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid" id=" mainnav" style="padding:0px">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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="~/images/logo.png" alt="" id =" logoimg1"/ style="display:none"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="@Url.Action("Index", "Product")">Home</a></li>
<li><a href="@Url.Action("DisplayProduct", "Product")">Products</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Software Development</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">IT Infra Services</a></li>
</ul>
</li>
<li><a href="@Url.Action("About", "Home")">About Us</a></li>
<li><a href="@Url.Action("Career", "Home")">Career</a></li>
<li><a href="@Url.Action("Event", "Home")">Event</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="@Url.Action("Contact", "Home")">Contact-Us</a></li>
</ul>
</div>
</div>
</nav>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop"> </a>
</body>
<!-- Required JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="@Url.Content("~/js/")jquery.openCarousel.js" ></script>
<script src="@Url.Content("~/js/")easing.js"></script>
<script src="@Url.Content("~/js/")move-top.js"></script>
<script src="@Url.Content("~/js/")modal.js"></script>
<!-- End Required JS -->
</html>