DIV+CSS两个简单的导航效果

<style type="text/css">
#ul1 li {
 float:left;
 list-style:none;
 margin-left:5px;
 font-size:12px;
}
#ul1 li a {
 display:block;
 padding:5px 9px;
 background-color:#efef00;
 text-decoration:none;
 position:relative;
}
</style>
<script language="javascript">
var st
var n=0
function shack(who){
 n++
 if(n==1){document.getElementById(who).style.margin="-1px 0px 0px 0px"}
 if(n==2){document.getElementById(who).style.margin="-2px 0px 0px 0px"}
 if(n==3){document.getElementById(who).style.margin="-3px 0px 0px 0px"}
 if(n==4){document.getElementById(who).style.margin="-3px 0px 0px 0px"}
 if(n==5){document.getElementById(who).style.margin="-2px 0px 0px 0px"}
 if(n==6){document.getElementById(who).style.margin="-1px 0px 0px 0px"}
  st=setTimeout(function(){shack(who)},20)
 if(n==6){n=0}
}
function stopshack(){
 clearTimeout(st)
 for(i=1;i<=5;i++){
  document.getElementById("div"+i).style.margin="0px 0px 0px 0px"
  }
 n=0
}
</script>
<ul id="ul1">
<li onmouseover="shack('div1')" onmouseout="stopshack()"><a href="#"><div id="div1">连接文字</a></div></li>
<li onmouseover="shack('div2')" onmouseout="stopshack()"><a href="#"><div id="div2">连接文字</a></div></li>
<li onmouseover="shack('div3')" onmouseout="stopshack()"><a href="#"><div id="div3">连接文字</a></div></li>
<li onmouseover="shack('div4')" onmouseout="stopshack()"><a href="#"><div id="div4">连接文字</a></div></li>
<li onmouseover="shack('div5')" onmouseout="stopshack()"><a href="#"><div id="div5">连接文字</a></div></li>
</ul>

-------------------------------------------------------------------------------------------------------------------------

<style type="text/css">
li {
 list-style:none;
 float:left;
 font-size:12px;
 margin-left:5px;
}
li div {
 position:relative;
 width:80px;
 height:22px;
 background:orange;
 text-align:center
}
li div span {
 position:absolute;
 left:14px;
 margin-top:4px;
}
</style>
<script language="javascript">
var n=14
var st,st1
function shackright(who){
 document.getElementById(who).style.left=n+"px"
 n++
 st1=setTimeout( function(){ shackright(who) },10 )
 if(n==26){
  clearTimeout(st1);
  shackleft(who)
  }
}
function shackleft(who){
 document.getElementById(who).style.left=n+"px"
 n--
 st=setTimeout( function(){ shackleft(who) },10 )
 if(n==2){
  clearTimeout(st);
  shackright(who)
  }
 }
function stopshack(){
 clearTimeout(st)
 clearTimeout(st1)
 for(i=1;i<=6;i++){
 document.getElementById("span"+i).style.left="14px"
  }
 n=14
 }
</script>
<ul>
<li onmouseover="shackleft('span1')" onmouseout="stopshack()"><div><span id="span1">文字导航</span></div></li>
<li onmouseover="shackleft('span2')" onmouseout="stopshack()"><div><span id="span2">文字导航</span></div></li>
<li onmouseover="shackleft('span3')" onmouseout="stopshack()"><div><span id="span3">文字导航</span></div></li>
<li onmouseover="shackleft('span4')" onmouseout="stopshack()"><div><span id="span4">文字导航</span></div></li>
<li onmouseover="shackleft('span5')" onmouseout="stopshack()"><div><span id="span5">文字导航</span></div></li>
<li onmouseover="shackleft('span6')" onmouseout="stopshack()"><div><span id="span6">文字导航</span></div></li>
</ul>