鼠標滑過展開菜單，適應IE和Firefox

<style type="text/css">
<!--
body { font-size:12px; }
#ChildMenu1 {
margin:0;padding:0;border:0;
}
#ChildMenu2 {
margin:0;padding:0;border:0;
}
#ChildMenu3 {
margin:0;padding:0;border:0;
}
#ChildMenu4 {
margin:0;padding:0;border:0;
}
#ChildMenu5 {
margin:0;padding:0;border:0;
}
#ChildMenu6 {
margin:0;padding:0;border:0;
}
#ChildMenu7 {
margin:0;padding:0;border:0;
}
#ChildMenu8 {
margin:0;padding:0;border:0;
}
#ChildMenu9 {
margin:0;padding:0;border:0;
}
#ChildMenu10 {
margin:0;padding:0;border:0;
}

#nav {
        margin:0;padding:0;border:0;
  width:140px;
        line-height: 24px;
        list-style-type: none;
        text-align:left;
    /*定義整個ul菜單的行高和背景色*/
}

/*==================一級目錄===================*/
#nav a {
        margin:0;padding:0;border:0;
        width: 130px;
        display: block;
        padding-left:10px;
        /*Width(一定要)，否則下面的Li會變形*/
}

#nav li {
        background:#EBEBEB; /*一級目錄的背景色*/
        border-bottom:#ffffff 1px solid; /*下面的一條白邊*/
        float:left;
        /*float：left,本不應該設置，但由於在Firefox不能正常顯示
        繼承Nav的width,限制寬度，li自動向下延伸*/
}

#nav li a:hover{
        background:#cccccc;        /*一級目錄onMouseOver顯示的背景色*/
}

#nav a:link  {
        color:#000; text-decoration:none;
}
#nav a:visited  {
        color:#000;text-decoration:none;
}
#nav a:hover  {
        color:#000;text-decoration:none;font-weight:bold;
}

/*==================二級目錄===================*/
#nav li ul {
        list-style:none;
        text-align:left;
}
#nav li ul li{       
        background: #ffffff; /*二級目錄的背景色*/
}

#nav li ul a{
         padding-left:20px;
         width:130px;
        /* padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/
}

/*下面是二級目錄的鏈接樣式*/

#nav li ul a:link  {
        color:#0000cc; text-decoration:none;
}
#nav li ul a:visited  {
        color:#0000cc;text-decoration:none;
}
#nav li ul a:hover {
        color:#0000cc;
        text-decoration:none;
        font-weight:normal;
        background:#cccccc;
        /* 二級onmouseover的字體顏色、背景色*/
}

/*==============================*/
#nav li:hover ul {
        left: auto;
}
#nav li.sfhover ul {
        left: auto;
}
#content {
        clear: left;
}
#nav ul.collapsed {
        line-height: 24px;
        display: none;
}
-->

#PARENT{
        width:140px;
        padding-left:0px;
}
</style>

<div id="PARENT">
<ul id="nav">
<li><a href="http://www.tripbee.cn">&nbsp;旅遊蜜</a></li>
<li><a href="#Menu=ChildMenu1"  _fcksavedurl=""#Menu=ChildMenu1" " onMouseOver="DoMenu('ChildMenu1')">&nbsp;旅遊蜜001</a>
        <ul id="ChildMenu1" class="collapsed">
        <li><a href="http://www.tripbee.cn" onClick="DoMenu('ChildMenu1')">旅遊蜜1</a></li>
        <li><a href="http://www.tripbee.cn">旅遊蜜1_</a></li>
        <li><a href="http://www.tripbee.cn">旅遊蜜1_</a></li>
        </ul>
</li>
<li><a href="#Menu=ChildMenu2" _fcksavedurl=""#Menu=ChildMenu2"" onMouseOver="DoMenu('ChildMenu2')">&nbsp;旅遊蜜002</a>
        <ul id="ChildMenu2" class="collapsed">
        <li><a href="http://www.tripbee.cn">旅遊蜜2_</a>
        <li><a href="http://www.tripbee.cn">旅遊蜜2_</a></li>
        </ul>
</li>
<li><a href="#Menu=ChildMenu3" onMouseOver="DoMenu('ChildMenu3')">&nbsp;旅遊蜜003</a>
        <ul id="ChildMenu3" class="collapsed">
        <li><a href="#">旅遊蜜3_</a></li>
        </ul>
</li>
<li><a href="#Menu=ChildMenu4" onMouseOver="DoMenu('ChildMenu4')">&nbsp;旅遊蜜004</a>
        <ul id="ChildMenu4" class="collapsed">
        <li><a href="#">旅遊蜜4_</a></li>
        </ul>
</li>
<li><a href="#Menu=ChildMenu5" onMouseOver="DoMenu('ChildMenu5')">&nbsp;旅遊蜜005</a>
        <ul id="ChildMenu5" class="collapsed">
        <li><a href="#">旅遊蜜5_</a></li>
        <li><a href="#">旅遊蜜5_</a></li>
        <li><a href="#">旅遊蜜5_</a></li>
        </ul>
</li>
<li><a href="#Menu=ChildMenu6" onMouseOver="DoMenu('ChildMenu6')">&nbsp;旅遊蜜006</a>
        <ul id="ChildMenu6" class="collapsed">
        <li><a href="#">旅遊蜜6_</a></li>
        </ul>
</li>
<li><a href="#Menu=ChildMenu7" onMouseOver="DoMenu('ChildMenu7')">&nbsp;旅遊蜜7</a>
        <ul id="ChildMenu7" class="collapsed">
        <li><a href="#">旅遊蜜7_</a></li>
        </ul>
</li>
</ul>
</div>

<script type=text/javascript><!--
var LastLeftID = "";

function menuFix() {
        var obj = document.getElementById("Nav").getElementsByTagName("li");
       
        for (var i=0; i<obj.length; i++) {
                obj[i].onmouseover=function() {
                        this.className+=(this.className.length>0? " ": "") + "sfhover";
                }
                obj[i].onMouseDown=function() {
                        this.className+=(this.className.length>0? " ": "") + "sfhover";
                }
                obj[i].onMouseUp=function() {
                        this.className+=(this.className.length>0? " ": "") + "sfhover";
                }
                obj[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), "");
                }
        }
}

function DoMenu(emid)
{
        var obj = document.getElementById(emid);
        obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
        if((LastLeftID!="")&&(emid!=LastLeftID))        //關閉上一個Menu
        {
                document.getElementById(LastLeftID).className = "collapsed";
        }
        LastLeftID = emid;
}

function GetMenuID()
{

        var MenuID="";
        var _paramStr = new String(window.location.href);

        var _sharpPos = _paramStr.indexOf("#");
       
        if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
        {
                _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
        }
        else
        {
                _paramStr = "";
        }
       
        if (_paramStr.length > 0)
        {
                var _paramArr = _paramStr.split("&");
                if (_paramArr.length>0)
                {
                        var _paramKeyVal = _paramArr[0].split("=");
                        if (_paramKeyVal.length>0)
                        {
                                MenuID = _paramKeyVal[1];
                        }
                }
                /*
                if (_paramArr.length>0)
                {
                        var _arr = new Array(_paramArr.length);
                }
               
                //取所有#後面的，菜單隻需用到Menu
                //for (var i = 0; i < _paramArr.length; i++)
                {
                        var _paramKeyVal = _paramArr[i].split('=');
                       
                        if (_paramKeyVal.length>0)
                        {
                                _arr[_paramKeyVal[0]] = _paramKeyVal[1];
                        }               
                }
                */
        }
       
        if(MenuID!="")
        {
                DoMenu(MenuID)
        }
}

GetMenuID();        //*這兩個function的順序要注意一下，不然在Firefox裏GetMenuID()不起效果
menuFix();
--></script>

個人網站旅遊蜜歡迎您：http://www.tripbee.cn