<ul data-activable data-trigger=">a:first-child"> <li class="active"><a>Trigger</a> item 1, behavior "1"</li> <li><a>Trigger</a> item 2, behavior "1"</li> <li><a>Trigger</a> item 3, behavior "1"</li> </ul> <ul data-activable="01" data-trigger=">a:first-child"> <li><a>Trigger</a> item 1, behavior "01"</li> <li><a>Trigger</a> item 2, behavior "01"</li> <li><a>Trigger</a> item 3, behavior "01"</li> </ul> <ul data-activable="0X" data-trigger=">a:first-child"> <li><a>Trigger</a> item 1, behavior "0X"</li> <li><a>Trigger</a> item 2, behavior "0X"</li> <li><a>Trigger</a> item 3, behavior "0X"</li> </ul> <ul data-activable="T" data-trigger=">a:first-child"> <li><a>Trigger</a> item 1, behavior "T"</li> <li><a>Trigger</a> item 2, behavior "T"</li> <li><a>Trigger</a> item 3, behavior "T"</li> </ul>
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; } ul { display: table; width: 100%; margin: 0 0 15px; padding: 0; list-style-type: none; } li { display: table-cell; width: 32%; padding: 4px 8px; border-right: 3px solid #fff; background-color: #BBB; } li.active { background-color: #7BD; } li>a:first-child { font-size: 10px; background-color: #666; color: #CCC; padding: 2px 4px; margin-right: 4px; border-radius: 2px; cursor: pointer; } li>a:first-child:hover { background-color: #888; }