Closed
Description
I'm trying to make a menu with a dropdown which sub menus are displayed left instead of the default right. When I change "menu" to "left menu" on the sub menus, they are displayed left like I want to, but they will be displayed horizontally.
Some code to demonstrate:
<div class="ui menu">
<div class="ui dropdown icon item">
<i class="settings icon"></i>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">Sub 1</span>
<div class="left menu">
<a class="item" href="#"><span class="text">Sub sub 1.1</span></a>
<a class="item" href="#"><span class="text">Sub sub 1.2</span></a>
<a class="item" href="#"><span class="text">Sub sub 1.3</span></a>
</div>
</div>
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">Sub 2</span>
<div class="left menu">
<a class="item" href="#"><span class="text">Sub sub 2.1</span></a>
<a class="item" href="#"><span class="text">Sub sub 2.2</span></a>
<a class="item" href="#"><span class="text">Sub sub 2.3</span></a>
</div>
</div>
</div>
</div>
</div>
I pinpointed the problem to a flexbox display, which is assigned in the following CSS rules:
/* Left Floated */
.ui.menu:not(.vertical) .left.item,
.ui.menu:not(.vertical) .left.menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-right: auto !important;
}
/* Right Floated */
.ui.menu:not(.vertical) .right.item,
.ui.menu:not(.vertical) .right.menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-left: auto !important;
}
When I override these rules with a display: block; the problem disappears.
Is my markup wrong, or am I not aware of a feature of the menus, or is it a bug?