AJAX Conrtol Toolkit——HoverMenuExtender（停靠菜单）
同样要说的是“停靠菜单”，用JQuery（JavaScript）都是容易实现的。来看看该控件的属性：
TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.
PopupControlID - The ID of the control to display when mouse is over the target control. （当鼠标指针悬停在目标控件上方时显示的Menu控件ID）
HoveCssClass - The CSS class to apply to the target when the hover menu is visible.(当停靠菜单出现时，应用于目标控件的CSS样式)
HoverDelay-The time,in milliseconds,before the popup displays after hovering over the target control. Default is 0.(鼠标悬停到目标控件到弹出显示的延迟时间，单位为毫秒，默认为0.)我试了试，值并不是可以无限大，虽然不会报错，但是过不了零点几秒就会弹出Menu.(低版本中无该属性)
PopupDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. Default is 100.(指的是弹出的SubMenu在鼠标移到其它主菜单上时停留时间，默认为100毫秒)同样如此，它不会你设置多长时间就停留多长时间。
Animations - 弹出(OnShow)动画和隐藏（OnHide）动画，当然对Animation还会在后期进一步学习。
Demo>>>
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head id="Head1" runat="server">
6 <title>HoverMenu</title>
7 <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
8 <style type="text/css">
9 body
10 {
11 padding: 0;
12 margin: 0;
13 background-color: AppWorkspace;
14 }
15 a
16 {
17 color: #000000;
18 }
19 li
20 {
21 list-style-type: none;
22 }
23 li:hover
24 {
25 background-color: ThreeDHighlight;
26 }
27 ul li
28 {
29 display: block;
30 float: left;
31 padding: 5px;
32 font-family: "Comic Sans MS";
33 font-size: 24px;
34 }
35 ul li a
36 {
37 text-decoration: none;
38 color: Yellow;
39 }
40 .topnav
41 {
42 background-color: AppWorkspace;
43 height: 80px;
44 position: absolute;
45 left: 30px;
46 }
47 .popupMenu
48 {
49 position: absolute;
50 visibility: hidden;
51 background-color: transparent;
52 opacity: .9;
53 filter: alpha(opacity=90);
54 display: block;
55 }
56
57 .popupHover
58 {
59 background-image: url(images/header-opened.png);
60 background-repeat: repeat-x;
61 background-position: left top;
62 background-color: #BBCCDD;
63 }
64 </style>
65 </head>
66 <body>
67 <form id="form1" runat="server">
68 <asp:ScriptManager ID="ScriptManager1" runat="server" />
69
70 <div>
71 <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="home"
72 PopupControlID="homesub" PopupPosition="bottom" OffsetX="6" PopDelay="0" HoverCssClass="popupHover">
73 </ajaxToolkit:HoverMenuExtender>
74 <asp:Panel ID="homesub" runat="server" CssClass="popupMenu">
75 <li><a href="#" target="_black">SubMenu</a></li>
76 <li><a href="#" target="_black">SubMenu</a></li>
77 <li><a href="#" target="_black">SubMenu</a></li>
78 <li><a href="#" target="_black">SubMenu</a></li>
79 </asp:Panel>
80 <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender2" runat="server" TargetControlID="news"
81 PopupControlID="newsub" PopupPosition="bottom" OffsetX="6" HoverDelay="100" PopDelay="10" HoverCssClass="popupHover">
82 </ajaxToolkit:HoverMenuExtender>
83 <asp:Panel ID="newsub" runat="server" CssClass="popupMenu">
84 <li><a href="#" target="_black">新闻首页</a></li>
85 <li><a href="#" target="_black">电影新闻</a></li>
86 <li><a href="#" target="_black">人物新闻</a></li>
87 <li><a href="#" target="_black">电视新闻</a></li>
88 <li><a href="#" target="_black">图片新闻</a></li>
89 </asp:Panel>
90 <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender3" runat="server" TargetControlID="library"
91 PopupControlID="lirbrarysub" PopupPosition="bottom" OffsetX="6" PopDelay="10"
92 HoverCssClass="popupHover">
93 </ajaxToolkit:HoverMenuExtender>
94 <asp:Panel ID="lirbrarysub" runat="server" CssClass="popupMenu">
95 <li><a href="#" target="_black">Some LinkText</a></li>
96 <li><a href="#" target="_black">Some LinkText</a></li>
97 <li><a href="#" target="_black">Some LinkText</a></li>
98 <li><a href="#" target="_black">Some LinkText</a></li>
99 <li><a href="#" target="_black">Some LinkText</a></li>
100 </asp:Panel>
101 <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender4" runat="server" TargetControlID="movie"
102 PopupControlID="moviesub" PopupPosition="bottom" OffsetX="6" PopDelay="10" HoverCssClass="popupHover">
103 </ajaxToolkit:HoverMenuExtender>
104 <asp:Panel ID="moviesub" runat="server" CssClass="popupMenu">
105 <li><a href="#" target="_black">Some LinkText</a></li>
106 <li><a href="#" target="_black">Some LinkText</a></li>
107 <li><a href="#" target="_black">Some LinkText</a></li>
108 <li><a href="#" target="_black">Some LinkText</a></li>
109 <li><a href="#" target="_black">Some LinkText</a></li>
110 </asp:Panel>
111 <div class="topnav">
112 <ul>
113 <li id="home" runat="server"><a href="#" target="_black">首页|</a></li>
114 <li id="news" runat="server"><a href="#" target="_black">新闻|</a></li>
115 <li id="library" runat="server"><a href="#" target="_black">资料库|</a></li>
116 <li id="movie" runat="server"><a href="#" target="_black">电影院|</a></li>
117 <li><a href="#" target="_black">社区</a></li>
118 </ul>
119 </div>
120 </div>
121 </form>
122 </body>
123 </html>
