How to create popup menu with horizontal sub-menu in SEMANTIC - popup

Question

I wanna create horizontal sub menu when I click dropdown menu with SEMANTIC CSS. I just want like picture below. Thank you in advance!

Answer 1

Actually this is not a dropdown menu , you're looking for Popup , you can create your horizontal sub menu by creating first your menu button , then linking it to your Popup Content , like the following :
[Demo]
HTML
<div class="ui text menu">
<div class="item">
<img src="https://semantic-ui.com/images/new-school.jpg">
</div>
<!-- Your menu button -->
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<!-- /Your menu button -->
</div>
<!-- Your Popup Content -->
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
<!-- /Your Popup Content -->
JS(jQuery)
$('a.browse.item')
.popup({
popup : $('.ui.flowing.basic.admission.popup'),//Popup Content selector
on : 'click', //Event trigger
position : 'bottom left',
lastResort:true,
})
;
In popup settings you can choose your event trigger like on:'click' , it can be either like: focus,hover... , for more settings see Popup Settings.
[DOCS]