How to get popup to display on dropdown menu button hover

[William]

I am attempting to get the popup menu to display when hovering on dropdown menu button.  Can someone help? Thank Y

 <SfDropDownButton CssClass="e-caret-hide" Content="SERVICES" >
            <DropDownMenuItems>
                <DropDownButtonEvents ItemSelected="NavigateToUIDesign"></DropDownButtonEvents>
                <DropDownMenuItem Text="UI Web Design" ></DropDownMenuItem>
                <DropDownButtonEvents ItemSelected="NavigateToUIDesign"></DropDownButtonEvents>
                <DropDownMenuItem Text="UI Mobile Design" ></DropDownMenuItem>
                <DropDownMenuItem Text="Business Systems" ></DropDownMenuItem>
                <DropDownMenuItem Text="QA-Audits" ></DropDownMenuItem>
            </DropDownMenuItems>
</SfDropDownButton>

/****************************
        Buttons
******************************/


 .e-dropdown-btn, .e-dropdown-btn.e-btn {
        color: white;
        font-size: 23px;
        margin-left: 2em;
        background: none;
        padding: .25em 0;
        border: none;
       

    }
   

    .e-dropdown-btn:hover {
        color: red;
       border: none;
       font-size:30px;
       
    }

       .e-dropdown-popup {/******PopUP********/
        background: white;
        border: 1px solid red;
        color: darkblue;
        border-radius: 7px;
        width: 20%;
    }

 
    .e-dropdown-popup ul .e-item:hover {/*****Dropdown list items on hover******/
        color: red;
        background: white;
        font-size: 30px;
        font-weight: 700;
       

    }

    .e-dropdown-popup ul .e-item {/*********Dropdown list items*********/
        color: darkblue;
        background: white;
        font-size: 20px;
        font-weight: 700;
       

    }

    .e-dropdown-btn.e-active {/*********Dropdown on active*********/
        color: darkblue;
        font-size: 32px;
    }

[YuvanShankar Arunagiri]

Hi William,

We have validated your reported issue and prepared sample based on your requirement. Please refer the below code snippet. We can achieve your requirement by using Toggle method of the dropdown button.

[Index.razor]:

@using Syncfusion.Blazor.SplitButtons

 

<SfDropDownButton @ref="ddbtn" CssClass="e-caret-hide" Content="SERVICES" @onmouseover="mousehover">

    <DropDownMenuItems>

        <DropDownMenuItem Text="UI Web Design"></DropDownMenuItem>

        <DropDownMenuItem Text="UI Mobile Design"></DropDownMenuItem>

        <DropDownMenuItem Text="Business Systems"></DropDownMenuItem>

        <DropDownMenuItem Text="QA-Audits"></DropDownMenuItem>

    </DropDownMenuItems>

</SfDropDownButton>

 

@code{

    private SfDropDownButton ddbtn;

    private void mousehover()

    {

        ddbtn.Toggle();

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[William]

Works great...thank you.

[YuvanShankar Arunagiri]

Hi William,

We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A