Kevin Powell - CommunityKP-C
Kevin Powell - Communityā€¢4y agoā€¢
19 replies
AllaN

Dropdown menu on click using only CSS without any JS or other scripts.

Hello Kevin and all the lovely member,

I am facing a challenge to create a menu clickable and not hover using only CSS. This is 1st time asking a query I dont know if its the right channel to post if its not please guide me where to post.

My code:
<td class="jsgrid-cell" style="width: 100px;">
    <span>
    <div class="dropdown">
        <a style="color: rgb(255, 255, 255); position: relative; left: 10%;">Actions</a>
        <i class="fas fa-angle-down" style="color: rgb(255, 255, 255); position: relative; left: 15%;"></i>
            <div class="dropdown-content">
            <a onclick="buttonClick(event, 'Assign')"><i class="far fa-user-plus"></i>&nbsp;&nbsp;Assign to</a>
            <a onclick="buttonClick(event, 'ActionsOpen')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>
            <a onclick="buttonClick(event, 'ActionsView')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>
            <a onclick="buttonClick(event, 'ActionsSoftDelete')"><i class="far fa-trash"></i>&nbsp;&nbsp;Delete</a>
            </div>
    </div>
    </span>
</td>


So its a part of a viewgrid where a table cell carries a dropdown, hover works fine but I want to be able to click and then the menu should open.

Can anyone help me with CSS code depending upon the above classes and Id's used it will highly helpful and greatly appreciated. Thanks.
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy