How to make two row of top fixed menu in semantic-ui

Question

AS title, I want the top fixed menu have two rows instead of one.

Here is what I have tried.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
<div class="ui top fixed inverted menu">
    <div class="ui container">
        <a class="item">Item</a>
        <a class="item">Item</a>
    </div>
    <div class="ui container">
        <a class="item">Item</a>
    </div>
</div>

Using second container result in both occupying 50% width. Using column and grid also not working (the menu no longer maintain its layout). It seems to be a simple question. Any helps are welcome.

Answer 1

I just try with a display:block to force your parent div displaying this way. Looks working.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
<div class="ui top fixed inverted menu" style="display:block">
    <div class="ui container">
        <a class="item">Item</a>
        <a class="item">Item</a>
    </div>
    <div class="ui container">
        <a class="item">Item</a>
    </div>
</div>