<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>div+css+js-Tree menu, Refresh </title>
<meta name= "description" content= "http://http://www.alixixi.com/web/a/www.Xrss.cn" >
<style type= "Text/css" >
<!--
*{margin:0;padding:0;border:0;}
Body {
Font-family:arial, XXFarEastFont-Arial, serif;
font-size:12px;
}
#nav {
width:180px;
line-height:24px;
List-style-type:none;
Text-align:left;
/* Define the line height and background color of the entire UL menu * *
}
/*================== level directory ===================*/
#nav a {
width:160px;
Display:block;
padding-left:20px;
/*width (must), otherwise the following li will deform * *
}
#nav Li {
Background: #CCC; /* First-level directory background Color * *
Border-bottom: #FFF 1px solid; * * Below a white edge * *
Float:left;
/*float:left, this should not be set, but because the Firefox does not display properly
Inherit the width of the nav, limit the breadth, Li automatically downward extension * *
}
#nav Li a:hover{
Background: #CC0000; /* Level of directory onmouseover display background color * *
}
#nav A:link {
Color: #666; Text-decoration:none;
}
#nav a:visited {
Color: #666; text-decoration:none;
}
#nav A:hover {
Color: #FFF; text-decoration:none;font-weight:bold;
}
/*================== Level Two directory ===================*/
#nav Li ul {
List-style:none;
Text-align:left;
}
#nav Li ul li{
Background: #EBEBEB; /* Background color of Level two directory * *
}
#nav Li ul a{
padding-left:20px;
width:160px;
/* Padding-left The text in the level two directory moves to the right, but the width must be reset = (total width-padding-left) * *
}
/* Below is the link style of level two directory * *
#nav Li ul a:link {
Color: #666; Text-decoration:none;
}
#nav Li ul a:visited {
Color: #666; text-decoration:none;
}
#nav Li ul a:hover {
Color: #F3F3F3;
Text-decoration:none;
Font-weight:normal;
Background: #CC0000;
/* Level two onmouseover font color, background color * *
}
/*==============================*/
#nav Li:hover ul {
Left:auto;
}
#nav Li.sfhover ul {
Left:auto;
}
#content {
Clear:left;
}
#nav ul.collapsed {
Display:none;
}
-->
#PARENT {
width:300px;
padding-left:20px;
}
</style>
<body>
<div id= "PARENT" >
<ul id= "NAV" >
<li><a href= "#Menu =childmenu1" > My website </a>
<ul id= "ChildMenu1" class= "collapsed" >
<li><a href= "http://http://www.alixixi.com/web/a/www. xrss.cn "target=" _blank ">http://www.alixixi.com/web/a/www. Xrss.cn</a></li>
<li><a href= "http://http://www.alixixi.com/web/a/www. xrss.cn "target=" _blank ">http://www.alixixi.com/web/a/www. Xrss.cn</a></li>
<li><a href= "http://http://www.alixixi.com/web/a/www. xrss.cn "target=" _blank ">http://www.alixixi.com/web/a/www. Xrss.cn</a></li>
</ul>
</li>
<li><a href= "#Menu =childmenu2" > My account </a>
<ul id= "ChildMenu2" class= "collapsed" >
<a href= "http://http://www.alixixi.com/web/a/www.Xrss.cn" target= "_blank" > Payment </a></li>
<li><a href= "#" > Online payment </a></li>
<li><a href= "#" > Registered Remittance </a></li>
<li><a href= "#" > Online found </a></li>
<li><a href= "#" > Historical accounts </a></li>
</ul>
</li>
<li><a href= "#Menu =childmenu3" > website Management </a>
<ul id= "ChildMenu3" class= "collapsed" >
<li><a href= "#" > Login </a></li>
<a href= "http://http://www.alixixi.com/web/a/www.Xrss.cn" target= "_blank" > Management </a></li>
<li><a href= "#" > Management </a></li>
<li><a href= "#" > Management </a></li>
</ul>
</li>
<li><a href= "#Menu =childmenu4" > website Management </a>
<ul id= "ChildMenu4" class= "collapsed" >
<li><a href= "#" > Login </a></li>
<a href= "http://http://www.alixixi.com/web/a/www.Xrss.cn" target= "_blank" > Management </a></li>
<li><a href= "#" > Management </a></li>
<li><a href= "#" > Management </a></li>
</ul>
</li>
</ul>
</div>
<div style= "width:300;padding-left:30px;" >
</br></br>
The job needs to have a menu, share to everybody, everybody study together
</br></br>
Please support: <a href= "http://http://www.alixixi.com/web/a/www. xrss.cn "target=" _blank ">http://http://www.alixixi.com/web/a/www. Xrss.cn</a>
</div>
</body>
<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))//Close Previous 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);
}
Take all # behind, menu only
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 (); * These two function order should pay attention to, otherwise in Firefox getmenuid () no effect
Menufix ();
--></script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
