通用的标准版下拉菜单

最新推荐文章于 2024-09-25 16:29:08 发布
最新推荐文章于 2024-09-25 16:29:08 发布
阅读量505 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： function 产品 float border css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangtututu/article/details/1367742
版权
<! 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 "  ... quot;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].οnmοuseοver=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].οnmοuseοut=function() {
        this.className=this.className.replace(new RegExp( " (  ?|^ )sfhover/b " ),

 "" );
        }
    }
}
window.οnlοad=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>
 
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
yangtututu
关注
专栏目录
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
10-30
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容 本文将详细介绍如何使用纯CSS创建一个纵向下拉菜单，同时兼容IE6和IE7浏览器。 一、网页布局 在开始之前，我们需要了解基本的网页布局结构。一个标准的网页布局结构通常...
jQuery网站后台常用左侧伸缩下拉菜单代码.zip
07-11
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还...jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
三级下拉菜单 Javascript(通用版)
07-02
在这个"三级下拉菜单 Javascript(通用版)"的项目中，我们将会探讨如何使用JavaScript来创建一个适用于各种场景的动态下拉菜单，并结合AJAX技术实现异步数据加载。 首先，我们需要理解基本的HTML结构，通常三级下拉...
通用HTML5企业网站模板
11-30
Bootstrap的核心特性包括网格系统、响应式导航、表单控件、按钮、下拉菜单、模态框等，这些都极大地加速了网站的开发过程。在“通用HTML5企业网站模板”中，Bootstrap的网格系统用于创建灵活的布局，使网站能够适应...
30套经典网页设计模版
02-22
面包屑导航、下拉菜单和页脚链接都是常见的导航方式。 6. **交互设计**：交互元素如按钮、表单、滑块和提示信息等，应有良好的反馈机制，使用户操作直观且明确。 7. **SEO优化**：考虑到搜索引擎的排名，模版可能...
网页打开时自动窗口最大化JS代码
小兔子的专栏
11-11 3503
 方法一：(我没成功，不知为何)head区加入：object id=syuwin type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" VIEWASTEXT>param name="Command" value="MAXIMIZE">object>script language
一个title提示框
小兔子的专栏
11-05 2601
 很久以前的代码，没有整理，拷贝出来预览就可以了！html>HEAD>meta http-equiv="Content-Type" content="text/html; charset=gb2312">META NAME="robots" CONTENT="all">META name="10771" content="12332705,10771@163.com">LINK hre
js连续滚动(上下左右)
小兔子的专栏
11-05 1741
 这种滚动代码简单，效果也不错，但唯一的缺点就是滚动对象的长或宽不够时，它就停止运行“罢工”了上base href="http://www.lami.cn">div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>div id=demo1> 定义图片 -->img sr
多种流行效果JS代码
小兔子的专栏
11-11 1458
html>meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=23)">meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=23)">head>head>title>Mapabc地图无限title>body >
又一个简单菜单
小兔子的专栏
11-09 1003
 使用方法：COPY TO JS DOCUMENT AND  WRITE TO HTML DOCUMNET：var mmenus    = new Array();var misShow   = new Boolean(); misShow=false;var misdown   = new Boolean();misdown=false;var mnumberofsub=0;var 
JS的QueryString函数
小兔子的专栏
11-05 924
 script language="JavaScript">function QueryString(item){        var sValue=location.search.match(new RegExp("[?&]"+item+"=([^&]*)(&?)","i"))        return sValue?sValue[1]:sValue }//alert(QuerySt
竖型菜单代码
小兔子的专栏
11-11 915
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>meta http-equiv="Content-Type" c
一个菜单代码
小兔子的专栏
11-08 701
 一个MENU，速度快 占用资源少。  通过onmouseover  ,onmouseout  来控制script language="JavaScript" type="text/JavaScript">function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0
ALT提示窗口
小兔子的专栏
11-05 657
head>title>Untitled Documenttitle>meta http-equiv="Content-Type" content="text/html; charset=gb2312">script language="JavaScript">tPopWait=50;tPopShow=50000;showPopStep=10;popOpacity=100;sPop=null;c
js事件触发列表与解说
小兔子的专栏
11-11 625
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 
JS 查源
小兔子的专栏
11-05 596
 javascript:s=document.documentElement.outerHTML;document.write();document.body.innerText=s; ctrl+O   复制打开IE<!--google_ad_client = "pub-8527320164371593";google_ad_width = 728;google_a
CSDN 中的 OBJECTID 处理
小兔子的专栏
11-05 588
CSDN 中的 OBJECTID 处理    script type="text/javascript" language="javascript">            function getObject(objectId)        ...{            if(document.getElementById)            ...{              
CSS开发全攻略
最新发布
邓邓子的博客
09-25 1032
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
QT creator 中C++的版本
03-29
4. 在“通用设置”下拉菜单中，选择“C语言标准”。 5. 选择您想要使用的C语言版本。 请注意，您的编译器必须支持您选择的C语言版本。如果您选择了不受支持的版本，编译器可能会发出警告或错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值