结合jst和css实现了在asp.net下xp风格的下拉菜单，效果图如下：

实现的步骤及源码如下：
Default.aspx代码：

default.aspx.cs代码：

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using UIControl;

namespace PopupMenuControlSample
{
    /**//// 

    /// Summary description for _default.
    /// 
    public class _default : System.Web.UI.Page
    {
        const string ControlContainer = "MainForm";
        const string ClickedMessage = "

The menu item '{0}' has been selected by the user.";
        const string NoMenuItemClicked = "

No menu item has been clicked yet.";
        const string MessageStyle = "Message";
        const string MenuControlID = "PopupMenu";
        const MenuItemDirection MenuDirection = MenuItemDirection.Vertical;
        const string PopupMenuParentID = "PopupMenuOwner";
        const string Services = "Services";
        const string ServicesAltText = "available services";
        const string ServicesName = "Services";
        const string ServicesJavaScript = null;
        const string ServicesImageUrl = null;
        const MenuItemDirection ServicesDirection = MenuItemDirection.Vertical;
        const string ServicesTableID = "Services";
        const string AboutMe = "About me";
        const string AboutMeAltText = "about me";
        const string AboutMeName = "AboutMe";
        const string AboutMeJavaScript = null;
        const string AboutMeImageUrl = null;
        const MenuItemDirection AboutMeDirection = MenuItemDirection.Vertical;
        const string AboutMeTableID = "AboutMe";
        const string UsefulLinks = "Useful links";
        const string UsefulLinksAltText = "useful links";
        const string UsefulLinksName = "UsefulLinks";
        const string UsefulLinksJavaScript = null;
        const string UsefulLinksImageUrl = null;
        const MenuItemDirection UsefulLinksDirection = MenuItemDirection.Vertical;
        const string UsefulLinksTableID = "UsefulLinks";
        const string Presenter = ".NET Presenter";
        const string PresenterAltText = "presenter for your .NET usergroup or show";
        const string PresenterName = "Presenter";
        const string PresenterJavaScript = null;
        const string PresenterImageUrl = "images/presenter.gif";
        const string PresenterTableID = "Presenter";
        const string Author = ".NET author";
        const string AuthorAltText = "author for your .NET magazine";
        const string AuthorName = "Author";
        const string AuthorJavaScript = "window.alert('Klaus Salchner, Chief Enterprise Architect');";
        const string AuthorImageUrl = null;
        const string AuthorTableID = "Author";
        const string Architect = ".NET architecture review";
        const string ArchitectAltText = "architecture review for your .NET project";
        const string ArchitectName = "Architect";
        const string ArchitectJavaScript = null;
        const string ArchitectImageUrl = "images/review.gif";
        const string ArchitectTableID = "Architect";
        const string Resume = "Resume";
        const string ResumeAltText = "my resume";
        const string ResumeName = "Resume";
        const string ResumeJavaScript = null;
        const string ResumeImageUrl = null;
        const string ResumeTableID = "Resume";
        const string ContactMe = "Contact me";
        const string ContactMeAltText = "contact me";
        const string ContactMeName = "ContactMe";
        const string ContactMeJavaScript = null;
        const string ContactMeImageUrl = "images/contactme.gif";
        const string ContactMeTableID = "ContactMe";
        const string CodeGuru = "CodeGuru";
        const string CodeGuruAltText = "CodeGuru";
        const string CodeGuruName = "CodeGuru";
        const string CodeGuruJavaScript = null;
        const string CodeGuruImageUrl = "images/codeguru.gif";
        const string CodeGuruTableID = "CodeGuru";
        const string DeveloperLand = "DeveloperLand";
        const string DeveloperLandAltText = "DeveloperLand";
        const string DeveloperLandName = "DeveloperLand";
        const string DeveloperLandJavaScript = null;
        const string DeveloperLandImageUrl = "images/developerland.gif";
        const string DeveloperLandTableID = "DeveloperLand";
        const string Msdn = "MSDN";
        const string MsdnAltText = "MSDN";
        const string MsdnName = "Msdn";
        const string MsdnJavaScript = null;
        const string MsdnImageUrl = "images/msdn.gif";
        const string MsdnTableID = "Msdn";
        const string GotDotNet = "Got-Dot-Net";
        const string GotDotNetAltText = "Got-Dot-Net";
        const string GotDotNetName = "GotDotNet";
        const string GotDotNetJavaScript = null;
        const string GotDotNetImageUrl = null;
        const string GotDotNetTableID = "GotDotNet";
        private Label Message;
        protected System.Web.UI.WebControls.Label PopupMenuOwner;

        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// 

        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// 
        private void InitializeComponent()
        {    
            this.Init += new System.EventHandler(this.Page_Init);

        }
        #endregion

        /**//// 

        /// initialize the form; allows us to add new controls to it
        /// 
        /// event sender
        /// event argument
        private void Page_Init(object sender, System.EventArgs e)
        {
            // create a new popup menu control to display
            PopupMenuControl MyPopupMenu = new PopupMenuControl();
            MyPopupMenu.MenuDirection = MenuDirection;
            MyPopupMenu.MenuShowSubMenuIndicator = true;
            MyPopupMenu.PopupMenuParentID = PopupMenuParentID;
            MyPopupMenu.ShowVerticalMenuImageBar = true;
            MyPopupMenu.ID = MenuControlID;

            // create the popup-menu items
            MyPopupMenu.PopupMenu.Add(new PopupMenuItemDetails(Services, ServicesAltText, ServicesName, ServicesJavaScript, ServicesImageUrl, null, ServicesDirection, ServicesTableID, true));
            MyPopupMenu.PopupMenu.Add(new PopupMenuItemDetails(AboutMe, AboutMeAltText, AboutMeName, AboutMeJavaScript, AboutMeImageUrl, null, AboutMeDirection, AboutMeTableID, true));
            MyPopupMenu.PopupMenu.Add(new PopupMenuItemDetails(UsefulLinks, UsefulLinksAltText, UsefulLinksName, UsefulLinksJavaScript, UsefulLinksImageUrl, null, UsefulLinksDirection, UsefulLinksTableID, true));

            // create the services sub-menu
            MyPopupMenu.PopupMenu[0].PopupSubMenus = new PopupMenuItemDetailsCollection();
            MyPopupMenu.PopupMenu[0].PopupSubMenus.Add(new PopupMenuItemDetails(Presenter, PresenterAltText, PresenterName, PresenterJavaScript, PresenterImageUrl, null, MenuItemDirection.Vertical, PresenterTableID, false));
            MyPopupMenu.PopupMenu[0].PopupSubMenus.Add(new PopupMenuItemDetails(Author, AuthorAltText, AuthorName, AuthorJavaScript, AuthorImageUrl, null, MenuItemDirection.Vertical, AuthorTableID, false));
            MyPopupMenu.PopupMenu[0].PopupSubMenus.Add(new PopupMenuItemDetails(Architect, ArchitectAltText, ArchitectName, ArchitectJavaScript, ArchitectImageUrl, null, MenuItemDirection.Vertical, ArchitectTableID, false));

            // create the about-me sub-menu
            MyPopupMenu.PopupMenu[1].PopupSubMenus = new PopupMenuItemDetailsCollection();
            MyPopupMenu.PopupMenu[1].PopupSubMenus.Add(new PopupMenuItemDetails(Resume, ResumeAltText, ResumeName, ResumeJavaScript, ResumeImageUrl, null, MenuItemDirection.Vertical, ResumeTableID, false));
            MyPopupMenu.PopupMenu[1].PopupSubMenus.Add(new PopupMenuItemDetails(ContactMe, ContactMeAltText, ContactMeName, ContactMeJavaScript, ContactMeImageUrl, null, MenuItemDirection.Vertical, ContactMeTableID, false));

            // create the useful links sub-menu
            MyPopupMenu.PopupMenu[2].PopupSubMenus = new PopupMenuItemDetailsCollection();
            MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(DeveloperLand, DeveloperLandAltText, DeveloperLandName, DeveloperLandJavaScript, DeveloperLandImageUrl, null, MenuItemDirection.Vertical, DeveloperLandTableID, false));
            MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(CodeGuru, CodeGuruAltText, CodeGuruName, CodeGuruJavaScript, CodeGuruImageUrl, null, MenuItemDirection.Vertical, CodeGuruTableID, false));
            MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(GotDotNet, GotDotNetAltText, GotDotNetName, GotDotNetJavaScript, GotDotNetImageUrl, null, MenuItemDirection.Vertical, GotDotNetTableID, false));
            MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(PopupMenuItemDetails.PopupMenuItemSeparator());
            MyPopupMenu.PopupMenu[2].PopupSubMenus.Add(new PopupMenuItemDetails(Msdn, MsdnAltText, MsdnName, MsdnJavaScript, MsdnImageUrl, null, MenuItemDirection.Vertical, MsdnTableID, false));

            // find the cell we use to add our content
            Control ContentCell = BaseControl.FindControl(Controls, ControlContainer);

            // event handler called when a menu item has been clicked
            MyPopupMenu.MenuClicked += new MenuClicked(MyPopupMenu_MenuClicked);

            // if we found the content cell then let's add the popup menu control to it
            if (ContentCell != null)
                ContentCell.Controls.Add(MyPopupMenu);

            // the label which shows which menu item has been clicked
            Message = BaseControl.CreateLabel(Controls, NoMenuItemClicked);
            Message.CssClass = MessageStyle;
        }

        /**//// 

        /// event handler called when a menu item has been clicked
        /// 
        /// the menu controls collection
        /// the selected menu item
        void MyPopupMenu_MenuClicked(ControlCollection Controls, MenuItemDetails ClickedMenuItem)
        {
            Message.Text = String.Format(ClickedMessage, ClickedMenuItem.DisplayText);
        }    
    }
}

PopupMenuControl.js代码：

var VisibleSubMenus = '';
var MenuTimer = 0;
var CloseTimer = 0;
function EnterMenuCell(MenuCell,SubMenuTable)
{
    // if the sub-menu-table is not displayed at the moment
    if (SubMenuTable.style.display == 'none')
    {
        // then display it now
        SubMenuTable.style.display = '';

        // add this to the list of visible sub-menus; this is important if the user browses
        // multiple cascaded sub-menus
        if (VisibleSubMenus.length == 0)
            VisibleSubMenus += SubMenuTable.id;
        else
            VisibleSubMenus += ',' + SubMenuTable.id;
    }
}

//
// the user moves the mouse outside the menu cell
//
function LeaveMenuCell(MenuCell,SubMenuTable)
{
   
    if (MenuTimer == 0)
        MenuTimer = window.setInterval("CheckIfSubMenuToClose(" + SubMenuTable.id + ")", 20);
}


function LeaveSubMenuTable(SubMenuTable)
{
    // get the list of visible sub-menus
    var VisibleSubMenusArray = VisibleSubMenus.split(",");

    // get the last visible sub-menu
    var LastVisibleSubMenu = VisibleSubMenusArray[VisibleSubMenusArray.length - 1];


    if ((SubMenuTable.style.display != 'none') & (LastVisibleSubMenu == SubMenuTable.id))
    {
        // closes the sub-menu table
        CloseSubMenu(SubMenuTable);

        
        if (MenuTimer == 0)
            MenuTimer = window.setInterval("CloseAllSubMenus()", 20);
    }
}


function CloseAllSubMenus()
{
    // first clear the timer
    if (MenuTimer != 0)
    {
       window.clearInterval(MenuTimer);
       MenuTimer = 0;
    }
    
    // check if we have any sub-menus open
    if (VisibleSubMenus.length > 0)
    {
        // get the list of visible sub-menus
        var VisibleSubMenusArray = VisibleSubMenus.split(",");

        // now loop through all visible sub-menus and close them too
        for (Count=0; Count < visiblesubmenusarray.length; Count++)
        {
            // get a reference to the visible sub-menu
            var SubMenu = document.getElementById(VisibleSubMenusArray[Count]);

            // and now hide it
            SubMenu.style.display = 'none';
        }

        // reset the list of visible sub-menus
        VisibleSubMenus = '';
    }
}

//
// the user moves the mosue cursor over the sub-menu table
//
function EnterSubMenuTable(SubMenuTable)
{
   
    if (MenuTimer != 0)
    {
        window.clearInterval(MenuTimer);
        MenuTimer = 0;
    }
}


function CheckIfSubMenuToClose(SubMenuTable)
{
    // first clear the timer itself
    if (MenuTimer != 0)
    {
       window.clearInterval(MenuTimer);
       MenuTimer = 0;
    }

    // now close the sub-menu table
    CloseSubMenu(SubMenuTable);
}

//
// closes the sub-menu table and removes it from the list of visible sub-menus
//
function CloseSubMenu(SubMenuTable)
{
    // now close the sub-menu
    SubMenuTable.style.display = 'none';

    // get the list of visible sub-menus
    var VisibleSubMenusArray = VisibleSubMenus.split(",");

    // now we rebuild the list of visible sub-menus by excluding the sub-menu we 
    // just closed
    VisibleSubMenus = '';

    // loop through all existing sub-menus
    for (Count=0; Count < visiblesubmenusarray.length; Count++)

        // if the sub-menu is the same as the one we just closed then ignore it;
        // otherwise add it again
        if (VisibleSubMenusArray[Count] != SubMenuTable.id)
            if (VisibleSubMenus.length > 0)
                VisibleSubMenus += "," + VisibleSubMenusArray[Count];
            else
                VisibleSubMenus = VisibleSubMenusArray[Count];
}


function SetControlPosition(SubMenuTable,ParentTable,ParentCell,ParentMenuDirection,OffsetX,OffsetY)
{
    // we position the control absolute
    SubMenuTable.style.position = 'absolute';

    // parent menu is horizontal, so we position the sub-menu at left/bottom
    if (ParentMenuDirection == 'Horizontal')
    {
        SubMenuTable.style.left = ParentTable.offsetLeft + ParentCell.offsetLeft - 1;
        SubMenuTable.style.top = ParentTable.offsetTop + ParentTable.offsetHeight - 1;
    }
    else

        // parent menu is vertical, so we position the sub-menu at right/top
        if (ParentMenuDirection == 'Vertical')
        {
            SubMenuTable.style.left = ParentTable.offsetLeft + ParentTable.offsetWidth - 1;
            SubMenuTable.style.top = ParentTable.offsetTop + ParentCell.offsetTop - 1;
        }

        // there is no parent-menu; this is a popup menu which will be positioned in the
        // middle of the owning control
        else
        {
            SubMenuTable.style.left = ParentTable.offsetLeft + (ParentTable.offsetWidth / 2) + 1 + Number(OffsetX);
            SubMenuTable.style.top = ParentTable.offsetTop + (ParentTable.offsetHeight / 2) + 1 + Number(OffsetY);

            // add any body margin we have
            SubMenuTable.style.left = Number(SubMenuTable.style.left.replace('px','')) + Number(document.body.leftMargin);
            SubMenuTable.style.top = Number(SubMenuTable.style.top.replace('px','')) + Number(document.body.topMargin);
        }
}


function ShowPopupMenu(PopupOwnerControl,PopupTableControl,OffsetX,OffsetY)
{
    // position the popup menu in the middle of the owner control
    SetControlPosition(PopupTableControl, PopupOwnerControl, null, 'popup', OffsetX, OffsetY);

    // show the popup-menu
    PopupTableControl.style.display = '';

    // give the popup menu table the focus so we know when the user clicks anywhere
    // else (the control looses then the focus
    PopupTableControl.focus();
}


function ClosePopupMenu(PopupOwnerControl,PopupTableControl)
{
    if (CloseTimer == 0)
        CloseTimer = window.setInterval("ClosePopupMenuDelayed(" + PopupOwnerControl.id + "," + PopupTableControl.id + ")", 190);
}


function ClosePopupMenuDelayed(PopupOwnerControl,PopupTableControl)
{
    // clears first the timer
    if (CloseTimer != 0)
    {
        window.clearInterval(CloseTimer);
        CloseTimer = 0;
    }

    // we hide the popup menu
    PopupTableControl.style.display = 'none';

    // close any open sub-menu
    CloseAllSubMenus();
}

PopupMenuControl.css代码：

.PopupMenuTableStyle
{}{
    border: groove 2px white;
    background-color: black;
    position: relative;
    left: 0px;
    top: 0px;
}
.PopupMenuRowStyle
{}{
    vertical-align: middle;
}
.PopupMenuCellStyle
{}{
    background-color: #ececec;
    text-align: left;
    width: 180px;
    height: 20px;
}
.PopupMenuCellHighlightedStyle
{}{
    background-color: #ccccff;
    text-align: left;
    width: 180px;
    height: 20px;
}
.PopupMenuLinkStyle
{}{
    font: normal normal bold small/normal Arial;
    text-decoration: none;
    white-space: nowrap;
    color: blue;
    cursor: hand;
    line-height: 18px;
}
.PopupMenuLinkHighlightedStyle
{}{
    font: normal normal bolder small/normal Arial;
    text-decoration: none;
    white-space: nowrap;
    color: #ffffcc;
    color: blue;
    cursor: hand;
    line-height: 18px;
}
.MenuSeparatorCellStyle
{}{
    background-color: #ececec;
    height: 1px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.MenuSeparatorStyle
{}{
    border-top: ridge 1px;
    width: 100%;
    color: white;
    height: 1px;
}
.PopupMenuImageBarStyle
{}{
    background-color: #cccccc;
    width: 24px;
}

源码下载地址： http://www.cnblogs.com/Files/Terrylee/PopupMenuControlSample.rar