Today I came across a problem of making the DropDownExtender appear as if it is a standard drop down like it is when you hover over it (as shown in the image to the right). Initially I was thinking you could do something with the Animation framework, but after a bit of research I found the way to do it. This forum post (look for the accept answer by KristoferA), has the solution. The source code below the full working solution.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Always Visible Drop Down</title>
</head>
<body>
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
function DropDownExtender1_pageLoad()
{
$find('DropDownExtender1').unhover = doNothing;
$find('DropDownExtender1')._dropWrapperHoverBehavior_onhover();
}
function doNothing() {}
Sys.Application.add_load(DropDownExtender1_pageLoad);
</script>
<div>
<asp:scriptmanager id="sm" runat="server" />
<asp:label id="Label1" text="Select a value" runat="server" width="200" />
<asp:panel id="DropPanel1" runat="server">
<asp:linkbutton id="Link1" runat="server" text="Item 1" /><br />
<asp:linkbutton id="Link2" runat="server" text="Item 2" /><br />
<asp:linkbutton id="Link3" runat="server" text="Item 3" /><br />
<asp:linkbutton id="Link4" runat="server" text="Item 4" />
</asp:panel>
<cc1:dropdownextender id="DropDownExtender1" TargetControlID="Label1"
DropDownControlID="DropPanel1" runat="server">
</cc1:dropdownextender>
</div>
</form>
</body>
</html>