如何在ASP.NET中为LinkButton创建悬停触发的响应式下拉菜单？

针对你的需求，这里提供两种基于ASP.NET原生控件的实现方式，无需依赖纯HTML下拉，同时支持悬停触发和响应式适配：

方案一：使用ASP.NET Menu控件（原生快速实现） #

ASP.NET的Menu控件自带下拉菜单结构，只需配置菜单项并添加CSS样式即可实现悬停效果，适合快速开发。

母版页代码 #

<asp:Menu ID="BookMenu" runat="server" Orientation="Horizontal" StaticDisplayLevels="1" 
    DynamicHorizontalOffset="2" CssClass="book-menu">
    <Items>
        <asp:MenuItem Text="View Books" Value="ViewBooks">
            <asp:MenuItem Text="A" Value="OptionA" NavigateUrl="~/Books/OptionA.aspx" />
            <asp:MenuItem Text="B" Value="OptionB" NavigateUrl="~/Books/OptionB.aspx" />
            <asp:MenuItem Text="C" Value="OptionC" NavigateUrl="~/Books/OptionC.aspx" />
        </asp:MenuItem>
    </Items>
</asp:Menu>

配套CSS（实现悬停和响应式） #

.book-menu {
    font-family: Arial, sans-serif;
}
.book-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.book-menu li {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    cursor: pointer;
}
.book-menu li:hover ul {
    display: block;
}
.book-menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.book-menu ul ul li {
    display: block;
    white-space: nowrap;
}
/* 响应式适配：小屏幕下改为纵向布局 */
@media (max-width: 768px) {
    .book-menu li {
        display: block;
    }
    .book-menu ul ul {
        position: static;
        border: none;
        box-shadow: none;
    }
}

优势：原生控件自带状态管理，无需手动处理显示逻辑；不足：样式自定义需要覆盖控件默认CSS。

方案二：自定义组合控件（灵活可控） #

通过LinkButton（主按钮）+Panel（下拉容器）+LinkButton（子选项）的组合，完全自定义样式和后台事件，适配你的需求。

母版页代码 #

<div class="dropdown-container">
    <asp:LinkButton ID="LinkButton4" runat="server" CssClass="dropdown-toggle">View Books</asp:LinkButton>
    <asp:Panel ID="DropdownPanel" runat="server" CssClass="dropdown-menu">
        <asp:LinkButton ID="LinkOptionA" runat="server" CssClass="dropdown-item" OnClick="LinkOptionA_Click">A</asp:LinkButton>
        <asp:LinkButton ID="LinkOptionB" runat="server" CssClass="dropdown-item" OnClick="LinkOptionB_Click">B</asp:LinkButton>
        <asp:LinkButton ID="LinkOptionC" runat="server" CssClass="dropdown-item" OnClick="LinkOptionC_Click">C</asp:LinkButton>
    </asp:Panel>
</div>

配套CSS #

.dropdown-container {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}
.dropdown-toggle {
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 120px;
}
.dropdown-container:hover .dropdown-menu {
    display: block;
}
.dropdown-item {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: #f5f5f5;
}
/* 响应式适配 */
@media (max-width: 768px) {
    .dropdown-container {
        display: block;
        width: 100%;
    }
    .dropdown-menu {
        position: static;
        border: none;
        box-shadow: none;
        border-top: 1px solid #eee;
    }
}

后台C#代码（处理点击事件） #

protected void LinkOptionA_Click(object sender, EventArgs e)
{
    // 替换为你的业务逻辑，比如跳转页面
    Response.Redirect("~/Books/OptionA.aspx");
}

protected void LinkOptionB_Click(object sender, EventArgs e)
{
    Response.Redirect("~/Books/OptionB.aspx");
}

protected void LinkOptionC_Click(object sender, EventArgs e)
{
    Response.Redirect("~/Books/OptionC.aspx");
}

优势：样式和交互完全可控，后台事件处理灵活；不足：需要手动编写CSS控制显示逻辑（你熟悉纯HTML实现，这点成本很低）。

内容的提问来源于stack exchange，提问作者John H.