<aura:component >
    <aura:attribute name="label" type="String" default=""/>
    <aura:attribute name="options" type="Aura.Component[]" default="" description="the li components of the ul"/>

    <!-- when an option is clicked... -->
    <aura:handler name="onSelectPicklistOption" event="c:onSelectPicklistOptionEvent" action="{!c.handleSelectOption}"/>

    <div aura:id="picklist" class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click">
        <!-- detail excluded -->
        {!v.options}
    </div>
</aura:component>

({
    handleSelectOption: function(component, event, helper) {
        console.log('handleSelectOption')
    }
})

<aura:component >
    <!-- Picklist option selected -->
    <aura:registerEvent name="onSelectPicklistOption" type="c:onSelectPicklistOptionEvent"/>

    <li role="presentation">
        <span onclick="{!c.toggle}">
        </span>
    </li>
</aura:component>

({
    toggle : function(component, event, helper) {
        // select this one and de-select the others
        var selectOptionEvent = component.getEvent("onSelectPicklistOption");
        selectOptionEvent.setParams({
            "option": component
        });
        selectOptionEvent.fire();
    }
})

<aura:component>
    <c:picklist label="Pick an option">
        <aura:set attribute="options">
            <c:picklistOption text="test0" label="Test0"/>
            <c:picklistOption text="test1" label="Test1"/>
        </aura:set>
    </c:picklist>
</aura:component>