Menus with actions.

dabblet.css

/**
 * Menus with actions.
 */

body {
    background-color: #eee;
    color: #333;
    font-family: "Open Sans", sans-serif;
}

.x-menu > a > * {
    margin: 0;
    padding: 0;
}

.x-list {
    position: absolute;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #bbb, -2px 3px 3px #bbb;
    margin: 4px 0 0 0;
    padding: 0;
    list-style-type: none;
}

.x-list > li {
	position: relative;
    border-bottom: 1px solid #eee;
    padding: 10px 42px 8px 12px;
    background-color: #fff;
    min-height:20px;
}

.x-list > li:hover,
.x-list > li > span:hover {
    background-color: #e6f5fa;
}

.x-list > li > span {
    position: absolute;
    top:0;
    bottom:0;
    padding: 10px 8px;
    background-color: #fff;
}

.x-list > li > span:first-child {
    left: 0;
    right: 52px;
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x-list > li > span:first-child > a {
    color: #333;
    text-decoration: none;
}

.x-list > li > span:last-child {
    right: 0;
    padding-left: 0;
    padding-right: 12px;
}

.x-list > li > span.actions {
}

.x-list > li > span.actions:hover:before {
    border-left: 1px solid #e6f5fa;
}
.x-list > li > span:hover + span.actions:before {
    border-left: 1px solid #fff;
}

.x-list > li > span:last-child:before {
    content: '';
    padding-right: 12px;
    border-left: 1px solid #e0e0e0;
}

.x-list > li > span.actions {

    z-index:2;
}

.x-list > li > span.actions  > a {
    float: right;

    margin-top: -18px;
}

.x-list > li > a {
	position: relative;
    text-decoration: none;
    padding-top: 3px;
    padding-bottom: 3px;
    display: inline-block;
    color: #333;
    min-width: 190px;
}

.x-list > li > a:last-child {
    margin-right: 0;
}

.x-list > li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.x-list > li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

[data-action="add"] {
    font-weight: bold;
    color: #048abb !important;
}

.x-list.with-actions {
	min-width:240px;
	width:auto;
	overflow: hidden;
}

.x-list.with-actions > li {
	position: relative;
    z-padding: 10px 12px 8px;
    z-min-width: 175px;
    z-width: 100%;
    overflow: hidden;
}

.x-list.with-actions > li > a {
	float: left;
}

.x-list.with-actions > li > .action {
	float: right;
    margin: 0px;
	right: 12px;
    padding: 3px 13px 3px 12px;
    text-align: left;
    color: #048abb;
    border-left: 1px solid #efefef;
    min-width: auto;
    width:30px;
}

.x-list.with-actions > li:hover > .action {
	border-left: 1px solid #dedede;
}

.x-list.with-actions .action-add {
	padding: 2px 0px 5px;
}

dabblet.html

<div class="x-menu">
			    <a href="#"><h2>Filter</h2></a>
			    <ul class="x-list with-actions">
			        <li>
			            <a href="#">Super Grover</a>
			        </li>
			        <li>
			            <span>
			                <a href="#">Double Standard Full Cream</a>
			            </span>
			            <span class="actions">
			                <a href="#">Edit</a>
			            </span>
			        </li>
			        <li>
			            <span>
			                <a href="#">Boutros Boutros Ghali</a>
			            </span>
			            <span class="actions">
			                <a class="action"href="#">Edit</a>
			            </span>
			        </li>
			        <li>
			            <span>
			                <a href="#">Snuffleupagus</a>
			            </span>
			            <span class="actions">
			                <a class="action" href="#">Edit</a>
			            </span>
			        </li>
			        <li>
			            <a href="#" data-action="add">+ New Item</a>
			        </li>
			    </ul>
			</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}