semantic-ui dropdown menu do not work

Question

I have been trying to build a menu using Semantic-UI. I can\'t get the dropdown menus to work at all. I took a copy of the page Menu examples and pulled out everything excep

Answer 1

One way is JS where you need to initialise script. Other way is to add a class "simple" to dropdown

<div class="ui simple dropdown item">

Answer 2

A quick note:

If the dropdown is not displaying and Bootstrap has been loaded on the same page with semantic-ui, then make sure to load the semantic js library after bootstrap.

This occurs because both bootstrap and semantic-ui have the same .dropdown() method used for displaying dropdown menus. That said, the last library to be loaded between semantic-ui and bootstrap will override all other .dropdown() methods that exists.

Answer 3

it worked with me when I added the function line above

    <script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>

Answer 4

If you initialize with $('.ui.dropdown').dropdown(); also make sure your page references dropdown.js

Answer 5

if the given answers didn't work for you, make sure you are not using bootstrap along with semantic-ui

Answer 6

You need to initialize your dropdown like so:

$('.ui.dropdown')
  .dropdown();

There is more information HERE