%action-group label span { display: none; } %action-group::before { margin-left: -1px; } %action-group label::after { margin-left: 5px; } %action-group label::before { margin-left: -7px; } %action-group { width: 30px; height: 30px; position: absolute; top: 8px; right: 15px; } %action-group label { display: block; height: 100%; } %action-group label:last-of-type { position: absolute; width: 100%; z-index: -1; top: 0; } /* this is actually the group */ %action-group ul { position: absolute; right: -10px; padding: 1px; } %action-group ul::before { position: absolute; right: 18px; content: ''; display: block; width: 10px; height: 10px; } %action-group ul:not(.above) { top: 35px; } %action-group ul:not(.above)::before { top: -6px; transform: rotate(45deg); } %action-group ul.above { bottom: 35px; } %action-group ul.above::before { bottom: -6px; transform: rotate(225deg); } %action-group li { position: relative; z-index: 1; } %action-group li a { width: 170px; padding: 10px 10px; } %action-group input[type='radio'], %action-group input[type='radio'] ~ ul, %action-group input[type='radio'] ~ .with-confirmation > ul { display: none; } %action-group input[type='radio']:checked ~ ul, %action-group input[type='radio']:checked ~ .with-confirmation > ul { display: block; } %action-group input[type='radio']:checked ~ label[for='actions_close'] { z-index: 1; }