右向無限菜單

<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工業,儘量少買X貨</title>
<SCRIPT language=javascript >

function mouseOverFun(obj)
{
var toLi=event.toElement;
if(toLi==obj) return false;
if(toLi.tagName=="A" || toLi.tagName=="UL") toLi=toLi.parentElement;
if(toLi.children[1]) toLi.children[1].style.display="block";
}

function onmouseOutFun(obj)
{
var fromLi=event.fromElement;
var eventToElement=event.toElement;
if(fromLi==obj) return false;
if(fromLi.tagName=="A" || fromLi.tagName=="UL") fromLi=fromLi.parentElement;
if(fromLi.contains(eventToElement)) return false;
if(fromLi.children[1]) fromLi.children[1].style.display="none";
var maxLevel=10;
while( maxLevel-- > 0)
{
fromLi=fromLi.parentElement.parentElement;
if(fromLi.contains(obj) || fromLi.tagName!="LI" || fromLi.contains(eventToElement))
break;
fromLi.children[1].style.display="none";
}
}
</SCRIPT>

<STYLE type="text/css">

BODY {
FONT: 11px verdana
}
UL {
PADDING: 0px; MARGIN: 0px; WIDTH: 150px; BORDER: #ccc 1px solid;
}
LI {
PADDING: 0px; MARGIN: 0px; WIDTH: 150px; BORDER: #ccc 1px solid; POSITION: relative;
}
LI UL {
LEFT: 149px; POSITION: absolute; TOP: 0px;DISPLAY:none;
}
LI A{
COLOR: #777;  TEXT-DECORATION: none;
}

LI A:hover {
BACKGROUND: #f9f9f9; COLOR: #e2144a
}
</STYLE>

<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY>

部分代碼來自gu1dai(異域蒼穹......追夢人):http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.4086878<br/>
<UL οnmοuseοver="mouseOverFun(this);" οnmοuseοut="onmouseOutFun(this);">
  <LI>
    <A href="#">Services</A>
    <UL>
      <LI>
        <A href="#">Web Design</A>            
        <UL>
          <LI><A href="#">Web Design->sub</A>            
          <LI><A href="#">Web Design->sub2</A>            
          <LI>
            <A href="#">Web Design->sub3</A>            
            <UL>
              <LI><A href="#">Web Design->3</A>            
              <LI><A href="#">Web Design->3</A>            
              <LI><A href="#">Web Design->3</A>            
            </UL>
        </UL>
      <LI><A href="#">Internet Marketing</A>             
      <LI><A href="#">Hosting</A>
      <LI><A href="#">Domain Names</A>             
      <LI><A href="#">Broadband</A>
    </UL>
  <LI>
    <A href="#">Services</A>
    <UL>
      <LI>
        <A href="#">Web Design</A>            
        <UL>
          <LI><A href="#">Web Design->sub</A>            
          <LI><A href="#">Web Design->sub2</A>            
          <LI>
            <A href="#">Web Design->sub3</A>            
            <UL>
              <LI><A href="#">Web Design->3</A>            
              <LI><A href="#">Web Design->3</A>            
              <LI><A href="#">Web Design->3</A>            
            </UL>
        </UL>
      <LI><A href="#">Internet Marketing</A>             
      <LI><A href="#">Hosting</A>
      <LI><A href="#">Domain Names</A>             
      <LI><A href="#">Broadband</A>
    </UL>

</UL>

 

</BODY></HTML>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章