JSFiddle - React, Tailwind, and code Playground
HTML
a
<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }">
<ul class="subMenu"></ul>
<div class="subMenuActions"> <i class="icon-caret-right"> ir1 </i>
<i class="icon-caret-down"> id1 </i>
</div>
<div class="subMenuActions"> <i class="icon-caret-right"> ir2 </i>
<i class="icon-caret-down"> id2 </i>
</div>
</li>
b
CSS
li {
position:relative;
padding-bottom:2em;
border:5px solid #cc0;
}
ul.subMenu {
background:green;
height:2em;
position:absolute;
width:100%;
bottom:0;
}
div.subMenuActions {
background:blue;
position:relative;
}
ul, div { /* normalize the css */
margin:0;
padding:0;
}
ul.subMenu:empty + .subMenuActions > i,
ul.subMenu:empty + .subMenuActions + .subMenuActions > i{
display: none;
}
JavaScript
// http://stackoverflow.com/questions/17629162/css-selector-that-matches-parent-of-empty-element