最近机缘巧合……用到了3种不同的方法去写Drop Down Menu……

在这里记一下，以后自己查起来方便。

1. 用Asp.net自带的menu control。基本上就是拖拖拉拉的，丢上去一点一点配就是了，通过配置LevelItemStyle, StaticHoverStyle, DynamicHoverStyle的CssClass达到menu的不同效果就完了。

最简单，但是应用范围是最小，只有aspx能用。

2. 用js隐藏/显示 menu。 这种方法里面menu是以<li>的形式存在在<div>里面的，然后鼠标hover的时候触发js，就完成了对menu的显示和隐藏了。要会写js才行，不过因为code很简单，所以去网上找例子改一下就行了。（我就是这样）
3.最豪华的方法，Pure Css！不用任何的js达成！教程在这里
原理其实和（2）差不多，不过这种方法不借助任何的js，直接用纯CSS完成，当然是最屌……

最关键的地方：

div#menu ul ul {
display: none;
}
div#menu ul li:hover ul
{display: block;}

还有要注意的一点是：IE对这种方法的支持不好，submenu的非anchor item会选取不到，所以需要下一个用来修正IE的htc (HTML Components) 在这里。

然后在body里面引用这个htc，名字是csshover.htc

body {
behavior: url(csshover.htc);
}

然后就修成正果了。
——————————————————————-
再说一下highlight current item的方法。

最笨的一种当然就是每个都上menu，然后把当前页的css改成高亮的……但如果有10个以上的页面，就可以写死你老人家了……

在asp.net里面，menu一般都是存在于master page的，每个页面套用就完了，所以更不可能去单独写。那么怎么办呢？就要借助javascript了……唉，还真是无奈……

js代码如下：

/**************************************************************************
*                                                                        *
*  JAVASCRIPT MENU HIGHLIGHTER v.1.5 (080929)                            *
* ——————————————–                           *
* ?005 Media Division (www.MediaDivision.com)                           *
*                                                                        *
* Written by Marius Smarandoiu & Armand Niculescu                        *
*                                                                        *
* You are free to use, modify and distribute this file, but please keep  *
* this header and credits                                                *
*                                                                        *
* Usage:                                                                 *
* - the script will apply the .current class to the <a> and its parent   *
*   <li> that is contained in the element with id=”primarynav” and points*
*   to the current URL                                                   *
* - works in IE6, Firefox and Opera                                      *
**************************************************************************/
function extractPageName(hrefString)
{
var arr = hrefString.split(’/');
return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != “DIV”)
{
arr[i].className = “current”;
arr[i].parentNode.className = “current”;
}
}
}
}

function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById(”nav”)!=null)
setActiveMenu(document.getElementById(”nav”).getElementsByTagName(”a”), extractPageName(hrefString));
}

除了js code之外，还需要就是写普通和高亮的两种css了，在menu中直接套用普通的css，高亮的命名为current就行了，当然也能用其他的名字，不过要记得把js code里面的名字也换成和css里一样。

menu随便放哪里都行，上面这段js是默认放在Div下面的，如果您还在用”<table>”的话，把js code里面的if (arr[i].parentNode.tagName != “DIV”)中的DIV换成td就是了。最后就是在menu里调用上面那段js code的setPage() function。

功德圆满。