dropdown not working in materialize

Question

I have a responsive navbar with a dropdown using materialize. The dropdown works fine on mobile version but does not on desktop resolution, which makes no sense to me since I just copy pasted. Does anyone know what may be going on?

Code:

$(".dropdown-trigger").dropdown({'coverTrigger': false, 'closeOnClick': true});

document.addEventListener('DOMContentLoaded', function() {
    var options = {
      'onOpenStart': myFunction, 
      'onCloseStart':myFunction
    };
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);

    
  });

<style type="text/css">
.no-shadows {
box-shadow: none!important;
}
</style>



<div class="navbar-fixed" style="position:fixed;"> 
<nav class="navbar-transition cool-navbar no-shadows">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
  <li><a href="sass.html">Sass</a></li>
  <li><a href="badges.html">Components</a></li>
  <li><a href="collapsible.html">Javascript</a></li>

  <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

</ul>
</div>
</nav>
</div>



<ul id="dropdown1" class="dropdown-content">
<li><a href=".">English</a></li>
<li class="divider"></li>
<li><a href=".">Español</a></li>


</ul>


<ul class="sidenav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>

<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

</ul>

Thanks!

Answer 1

You should remove this line of your code :

<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

Error occurred because you had two data-target="dropdown1" in your code. you should have had unique data-target="" attribute. So if you want to add another dropdown to your page, this attribute's data-target="" value should be for example"dropdown2".

jsfiddle