Bootstrap navbar dropdown menu item not working. Help!

HTML-CSS
1

Hey guys, I am working on a website for a friend to practice coding. My boostrap navbar works flawlessly on computers but on mobile (tested on IOS) the “Services” dropdown menu does nothing when it is clicked. Here is the snippet of navbar code and a link to the hosted site www.brightersolutionsohio.com.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="carousel.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Merriweather|Rochester" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- color scheme http://www.colorcombos.com/color-scheme-7626.html -->
    <title></title>
  </head>
  <body>


    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <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="#"></a> -->
            <img id="medlogo" src="images/templogo2.png" height="75px" alt"Brighter Solutions Logo"/>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="index.html" >Home</a><li>
            <li class ="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="services.html">Services<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="interiorpainting.html">Interior Painting</a></li>
                <li><a href="exteriorpainting.html">Exterior Painting</a></li>
                <li><a href="commercial.html">Commercial</a></li>
                <li><a href="homerenovation.html">Home Renovation</a></li>
              </ul>
            </li>
            <li><a href="projects.html">Projects</a><li>
            <li><a href="testimonials.html">Testimonials</a><li>
            <li><a href="about.html">About</a><li>
            <li><a href="contact.html">Contact</a><li>
          </ul>
        </div>
      </div>
    </nav>

Thanks!!

2

So after messing around with this a little longer I figured it out. My bootstrap CSS file needed to be before everything else. I moved it up and everything works now!