如何在SEMANTIC中创建带水平子菜单的弹出菜单

Question

当我使用SEMANTIC CSS单击下拉菜单时，我想创建水平子菜单。我只想要下面的图片。提前谢谢！

Answer 1

实际上这不是下拉菜单，您正在寻找Popup，您可以先创建菜单按钮创建水平子菜单，然后将其链接到您的弹出内容，如下所示：

[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 &amp; 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,
  })
;

在弹出式设置中，您可以选择on:'click'之类的事件触发器，它可以是：focus，hover ...，有关更多设置，请参阅Popup Settings。

[DOCS]