符合WEB标准的竖型下拉菜单

本文介绍了一种符合WEB标准的竖型下拉菜单实现方案,通过HTML和CSS结合JavaScript来创建具有多级子菜单的导航栏。文章详细展示了如何设置菜单项样式、使用JavaScript控制子菜单显示隐藏等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

符合WEB标准的竖型下拉菜单

<html>
<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>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值