我的番茄炒蛋
生活如此精彩,挑战无处不在!

导航

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body 
{ font: normal 12px verdana; }

ul 
{
    margin
: 0;
    padding
: 0;
    list-style
: none;
    width
: 130px; /* Width of Menu Items */
    border-bottom
: 1px solid #ccc;
    
}


ul li 
{ position: relative; }
    
li ul 
{
    position
: absolute;
    left
: 129px; /* Set 1px less than menu width */
    top
: 0;
    display
: none;
    
}


/* Styles for Menu Items */
ul li a 
{
    display
: block;
    text-decoration
: none;
    color
: #666;
    background
: #fff; /* IE6 Bug */
    padding
: 5px;
    border
: 1px solid #ccc;
    border-bottom
: 0;
    
}


/* Fix IE. Hide from IE Mac \*/
* html ul li 
{ float: left; height: 1%; }
* html ul li a 
{ height: 1%; }
/* End */

ul li a:hover 
{ color: #E2144A; background: #f9f9f9; } /* Hover Styles */
        
li ul li a 
{ padding: 2px 5px; } /* Sub Menu Styles */
        
li:hover ul, li.over ul 
{ display: block; } /* The magic */
</style>

<script type="text/javascript">
// drop_down.js
startList = function() {
    
if (document.all&&document.getElementById) {
        navRoot 
= document.getElementById("nav");
        
for (i=0; i<navRoot.childNodes.length; i++{
            node 
= navRoot.childNodes[i];
            
if (node.nodeName=="LI"{
                node.onmouseover
=function() {
                    
this.className+=" over";
                }

                node.onmouseout
=function() {
                    
this.className=this.className.replace(" over""");
                }

            }

        }

    }

}

window.onload
=startList;
</script>

</head>
<body> 
<ul id="nav"> 
  
<li><href="javascript:void(0);">Home</a></li> 
  
<li><href="javascript:void(0);">About</a> 
    
<ul> 
      
<li><href="#">History</a></li> 
      
<li><href="#">Team</a></li> 
      
<li><href="#">Offices</a></li> 
    
</ul> 
  
</li> 
  
<li><href="javascript:void(0);">Services</a> 
    
<ul> 
      
<li><href="#">Web Design</a></li> 
      
<li><href="#">Internet Marketing</a></li> 
      
<li><href="#">Hosting</a></li> 
      
<li><href="#">Domain Names</a></li> 
      
<li><href="#">Broadband</a></li> 
    
</ul> 
  
</li> 
  
<li><href="javascript:void(0);">Contact Us</a> 
    
<ul> 
      
<li><href="#">United Kingdom</a></li> 
      
<li><href="#">France</a></li> 
      
<li><href="#">USA</a></li> 
      
<li><href="#">Australia</a></li> 
    
</ul> 
  
</li> 
</ul> 
</body>
</html>
posted on 2007-02-12 08:50  bluesky  阅读(570)  评论(0)    收藏  举报