`

符合WEB标准的下拉导航菜单例子

WebCSSJavaScriptXHTMLHTML 
阅读更多

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>


<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}
body {
    font-family: arial, 宋体, serif;
        font-size:12px;
}


#nav {
     line-height: 24px;  list-style-type: none; background:#666;
}

#nav a {
    display: block; width: 80px; text-align:center;
}

#nav a:link  {
    color:#666; text-decoration:none;
}
#nav a:visited  {
    color:#666;text-decoration:none;
}
#nav a:hover  {
    color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
    float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
    background:#999;
}
#nav li ul {
    line-height: 27px;  list-style-type: none;text-align:left;
    left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
    float: left; width: 180px;
    background: #F6F6F6;
}


#nav li ul a{
    display: block; width: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link  {
    color:#666; text-decoration:none;
}
#nav li ul a:visited  {
    color:#666;text-decoration:none;
}
#nav li ul a:hover  {
    color:#F3F3F3;text-decoration:none;font-weight:normal;
    background:#C00;
}

#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}


-->
</style>

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseDown=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseUp=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
        }
    }
}
window.onload=menuFix;

//--><!]]></script>

</head>
<body>


<ul id="nav">
<li><a href="#">产品介绍</a>
    <ul>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    </ul>
</li>
<li><a href="#">服务介绍</a>
    <ul>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二服务二</a></li>
    <li><a href="#">服务二服务二服务二</a></li>
    <li><a href="#">服务二</a></li>
    </ul>
</li>
<li><a href="#">成功案例</a>
    <ul>
    <li><a href="#">案例三</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">案例三案例三</a></li>
    <li><a href="#">案例三案例三案例三</a></li>
    </ul>
</li>
<li><a href="#">关于我们</a>
    <ul>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四111</a></li>
    </ul>
</li>

<li><a href="#">在线演示</a>
    <ul>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示演示演示</a></li>
    </ul>
</li>
<li><a href="#">联系我们</a>
    <ul>
    <li><a href="#">联系联系联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    </ul>
</li>

</ul>

</body>
</html>

分享到：
| 利用Myeclipse快速开发struts应用程序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#.net_经典编程例子400个

    10 实例012　带进度条的状态栏　11 实例013　状态栏中加入图标　12 1.4　导航菜单界面　12 实例014　OutLook界面　12 实例015　带导航菜单的主界面　14 实例016　图形化的导航界面　15 1.5　...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    9.20.htm 实现树型导航菜单的完整代码 第10章（/C10/） ReturnText Ajax返回字符串数据 ReturnXML Ajax读取XML类型数据 PostUser Ajax提交数据更新服务器内容 xmlhttpWeather ...

    轻轻松松学用javascript编程

    软件技术文档,WEB应用开发。本文并不是一本集中讨论...◆ 可参考的JavaScript 代码：下拉菜单； ◆ 可参考的JavaScript 代码：类似于资源管理器的树图； ◆ 可参考的JavaScript 代码：一个所见所得的编辑器；

    asp.net知识库

    ASP.NET 2.0构建动态导航的Web应用程序（TreeView和Menu ） 体验.net2.0的优雅（3） -- 为您的 SiteMap 添加 控制转发功能 GridView控件使用经验 ASP.NET 2.0：弃用 DataGrid 吧，有新的网格控件了！ ASP.NET2.0控件...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例217 收缩式导航菜单 274 实例218 展开式导航菜单 276 实例219 解释型菜单 277 实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例217 收缩式导航菜单 274 实例218 展开式导航菜单 276 实例219 解释型菜单 277 实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 ...

    挑战代码3：AirBnB的新设计

    点击+图标/下拉菜单 选择新的存储库 我将存储库命名为“ code-challenge-3” 输入描述 通过添加README.md和.gitignore文件来初始化存储库 点击“创建存储库” 将新的存储库克隆到桌面 克隆存储库示例 在要克隆的...

    披萨店

    亚当斯（Ryland Adams）描述一个允许用户选择特定比萨饼浇头和大小以及查看总成本的Web应用程序软件需求_网络浏览器吉特·巴什设置在Github上，单击绿色的“代码”按钮，找到我的存储库链接，这将打开一个下拉菜单，...

    jQuery权威指南-源代码

    jQuery是继Prototype之后的又一个优秀JavaScript框架，深受全球开发者欢迎，已经成为Web开发领域的事实标准。jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手，...

Magicbox
Global site tag (gtag.js) - Google Analytics