Bootstrap Dropdown shows double? Weird One

Ok, so I've run into a weird problem while doing something pretty straightforward, and after two days of searching high and low, I wonder if anybody here can point me in the right direction:

I'm building a simple dropdown menu with Nav-Pills using Twitter Bootstrap. I'm following all the instructions (nothing complicated), and am linking to bootstrap.min.js, bootstrap.min.css and jquery.min.js via cdn.

However, the output shows the dropdown items twice, once as a toggled dropdownlist that is stacked vertically really nice and pops up and hides as you would expect, but then also overlayed is another set of the exact same drowdownlist items, this time horizontally spread out, and just there, displaying all the time, with no toggle functionality added.

BTW, i tried to recreate this as a jsfiddle and over there, the dropdown list just doesn't even show.

This is so weird to me, i've kind of run out of directions. Any ideas, anyone? Help is much appreciated!

My Code:

<head>
    <title>Trial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navbar-bottom">
        <div class="container-fluid">
            <ul class="nav nav-pills pull-right">
                <li class="active"><a href="#">Active Link</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown Link</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Option1</a></li>
                        <li><a href="#">Option2</a></li>
                    </ul>
                </li>
            </ul>
        </div>  
</nav>

and here the screenshots: this is toggled on :

this is toggled off:

Please try this code:

<li class="dropdown"><a href="javascript:void();" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown Link</a>
   <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
   </ul>
  </li>

I have edited in your jsfiddle and it works for me. Please check it.