Semantic Ui Dropdown on hover

Question

I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.

Javascript:

$('.ui.dropdown').dropdown({on:'hover'});

HTML:

<div class="ui dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>

Answer 1

If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:

<div class="ui simple dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>

Fiddle Demo