在线用户    站点地图 技术论坛 文档中心 站点导航 资源下载 语言参考 教程专题 站点统计 业务项目 使用帮助
您的位置
MSDN参考新加了CSS2参考,全中文,制作精良。245k下载。           新加了sxf_sxf推荐的"动态网页专家指导" 下载!          新加了lsg2002lsg推荐的"ASP.NET高级编程(PDF)" 下载!          新加了DHTML代码预览!!,功能强大哦!欢迎试用          新加了网友lincong为大家提供的SQL Server 2000 程序员指南,有点大,但同时也就说明内容全咯!           新加了网友ibra为大家提供的北大的JAVA课件,很适合初学者入门           新加了一个java的连接缓冲池代码示例           新加了人月神话电子版下载!软件工程巨著哦~~           更新了评分标准,引入了“专家分”概念,相信可以更好的激励大家的学习!详情请看“使用帮助”           新加了由网友GGG提供的“IIS超级管理手册”,值得一看哦!(虽然我没看过 :P )           新加了“英雄榜”,欢迎测试!           “无组件上传·从原理剖析到实践”已经全部完成,源码全部开放,有兴趣的朋友请到文档中心一探究竟。  您的位置  首页>文档中心>DHTML>文档A0000430 在同一窗口中打开页面中的链接 在新窗口中打开页面中的链接 将ASPCHINA设为首页 将ASPCHINA加入书签    
 LOGIN HERE
用户:
密码: 忘记密码
记住密码 用户注册 游客进入
相关文章
没有相关文章
发表文章
微软菜单

原作者:无     提交人:ggg     发布时间:03-08-18     文章类型:转贴     浏览量:2560
参考链结:http://    
关键字:
[本文档没有附件]
字体:    视力保护色: 杏仁黄  秋叶褐  胭脂红  芥末绿  天蓝  雪青  灰  银河白(默认色) [A0000430]

要完成此效果把如下代码加入到<body>区域中

<style>
.flyoutMenu {
    background-color: #F1F1F1;
    border-color: #999999;
    border-width: 0 1px 1px 0;
    border-style: solid;
}
.flyoutMenu TD.flyoutLink  {
    border-color: #F1F1F1;
    border-width: 1px;
    border-style: solid;
    font-family: Verdana,Arial;
    font-size: 70%;
    padding: 1px 25px 3px 6px;
    cursor: hand;
}
.flyoutLink a {
    color: black;
    text-decoration: none;
}
.flyoutLink a:hover {
    color: black;
    text-decoration: none;
}
.flyoutLink a:visited {
    color: black;
    text-decoration: none;
}
.flyoutLink a:active {
    color: black;
    text-decoration: none;
}
   
</style>
<script>
function over(){
    if(obj=event.srcElement)
        if(obj.className=="flyoutLink"){
            obj.style.backgroundColor='#cccccc'
            obj.style.borderColor = '#999999'
        }
}
function out(){
    if(obj=event.srcElement)
        if(obj.className=="flyoutLink"){
            obj.style.backgroundColor='#f1f1f1'
            obj.style.borderColor = '#f1f1f1'
        }
}
function show(d){
    if(obj=document.all(d))    obj.style.display=""
}
function hide(d){
    if(obj=document.all(d))    obj.style.display="none"
}

document.onmouseover=over
document.onmouseout=out
</script>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr><td>
    <table class="flyoutMenu" width="180" cellpadding="2" cellspacing="0" border="0" >
        <tr><td>
        <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutLink">微软菜单</td></tr>
            <tr><td class="flyoutLink" onmouseover=show("div1")  onmouseout=hide("div1")><a href="javascript:alert(1)">美国</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(2)">加拿大</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(3)">英国</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(4)">法国</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(5)">意大利</a></td></tr>
        </Table>
    </table>
    <table class="flyoutMenu" width="180" cellpadding="2" cellspacing="0" border="0" >
        <tr><td>
        <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutLink" ><a href="javascript:alert(5)">澳大利亚</a></td></tr>
        </table>
        </td></tr>
    </table>
    <table class="flyoutMenu" width="180" cellpadding="2" cellspacing="0" border="0" >
        <tr><td>
        <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutLink" handle="1672" onmouseover=show("div7")  onmouseout=hide("div7")><a href="javascript:alert(6)">中国</a></td></tr>
            <tr><td class="flyoutLink" ><a href="javascript:alert(7)">日本</a></td></tr>
        </table>
        </td></tr>
    </table>
    </td></tr>
</table>
<div id=div1 style="position:absolute;display:none;left:191;top:37" onmouseover=show("div1") onmouseout=hide("div1")>
    <table class="flyoutMenu" width="180" cellpadding="2" cellspacing="0" border="0" >
        <tr><td>
        <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutLink">美国菜单</td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(1)">纽约</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(2)">芝加哥</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(3)">三藩市</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(4)">华盛顿</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(5)">费城</a></td></tr>
        </Table>
    </table>
</div>
<div id=div7 style="position:absolute;display:none;left:191;top:165" onmouseover=show("div7") onmouseout=hide("div7")>
    <table class="flyoutMenu" width="180" cellpadding="2" cellspacing="0" border="0" >
        <tr><td>
        <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutLink">中国菜单</td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(1)">北京</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(2)">上海</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(3)">深圳</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(4)">厦门</a></td></tr>
            <tr><td class="flyoutLink"><a href="javascript:alert(5)">大连</a></td></tr>
        </Table>
    </table>
</div>

关于这篇文章的评论 [注意:这里仅仅是给大家提供了一个发表对文章本身看法的地方,如果有疑问,请到论坛提出] 我要提问!
Lonelyram        2004/1/1 2:15:00
很好
有一个问题:当鼠标移动到字上的时候,背景显示不出来!如何解决?
Lonelyram        2004/1/1 2:14:00
做的很好!
标题
内容
发言
*您尚未以注册用户身份登录,不能发表评论。这里登录
您的位置
  (c)2000-2020 Yup Studio, all rights reserved.  
85.9375