<!DOCTYPE html PUBddC "-//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; ddst-style:none;}
img{border:0;}
body{font:12px Arial,"宋体",serif;;}
#nav{line-height:24px;}/*一级菜单box*/
#nav a{display:block; width:80px; text-align:center; color:#666; text-decoration:none;}
#nav li{float:left; width:80px; background:#CCC; }/*一级菜单默认样式*/
#nav li a:hover{background:#999; color:#FFF; font-weight:bold;}/*鼠标移动到一级菜单上的变化*/
#nav li dl{line-height:27px; text-align:left; border:solid 1px #C30; position:absolute; left:-999em;}/*二级菜单box*/
#nav li dl dd a{display:block; width:140px; text-align:left; padding-left:1em; background:#F6F6F6;}/*这可以设置二级菜单的宽度*/
#nav li dl dd a:hover{color:#F3F3F3; font-weight:normal; background:#F90;}/*鼠标移动到二级菜单上的变化*/
#nav li:hover dl{left:auto;}
#nav li.sfhover dl{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" align="center">
<li> <a href="#" >产品介绍 </a>
<dl align="center">
<dd> <a href="#">产品一 </a> </dd>
<dd> <a href="#">产品一 </a> </dd>
<dd> <a href="#">产品一 </a> </dd>
<dd> <a href="#">产品一 </a> </dd>
<dd> <a href="#">产品一 </a> </dd>
<dd> <a href="#">产品一 </a> </dd>
</dl>
</li>
<li> <a href="#">服务介绍 </a>
<dl>
<dd> <a href="#">服务二 </a> </dd>
<dd> <a href="#">服务二 </a> </dd>
<dd> <a href="#">服务二 </a> </dd>
<dd> <a href="#">服务二服务二 </a> </dd>
<dd> <a href="#">服务二服务二服务二 </a> </dd>
<dd> <a href="#">服务二 </a> </dd>
</dl>
</li>
<li> <a href="#">成功案例 </a>
<dl>
<dd> <a href="#">案例三 </a> </dd>
<dd> <a href="#">案例 </a> </dd>
<dd> <a href="#">案例三案例三 </a> </dd>
<dd> <a href="#">案例三案例三案例三 </a> </dd>
</dl>
</li>
<li> <a href="#">关于我们 </a>
<dl>
<dd> <a href="#">我们四 </a> </dd>
<dd> <a href="#">我们四 </a> </dd>
<dd> <a href="#">我们四 </a> </dd>
<dd> <a href="#">我们四111 </a> </dd>
</dl>
</dd>
<li> <a href="#">在线演示 </a>
<dl>
<dd> <a href="#">演示 </a> </dd>
<dd> <a href="#">演示 </a> </dd>
<dd> <a href="#">演示 </a> </dd>
<dd> <a href="#">演示演示演示 </a> </dd>
<dd> <a href="#">演示演示演示 </a> </dd>
<dd> <a href="#">演示演示 </a> </dd>
<dd> <a href="#">演示演示演示 </a> </dd>
<dd> <a href="#">演示演示演示演示演示 </a> </dd>
</dl>
</li>
<li> <a href="#">联系我们 </a>
<dl>
<dd> <a href="#">联系联系联系联系联系 </a> </dd>
<dd> <a href="#">联系联系联系 </a> </dd>
<dd> <a href="#">联系 </a> </dd>
<dd> <a href="#">联系联系 </a> </dd>
<dd> <a href="#">联系联系 </a> </dd>
<dd> <a href="#">联系联系联系 </a> </dd>
<dd> <a href="#">联系联系联系 </a> </dd>
</dl>
</li>
</ul>
</body>
</html>
分享到:
相关推荐
本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码。分享给大家供大家参考。具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发...
1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...
这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦。 运行效果截图如下: 在线演示地址如下: ...
这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你...
JavaScript CSS 精仿淘宝首页顶部菜单,淘宝顶部的工具条都知道吧,...是淘宝各个主栏目的链接,说是精仿,实则是真正的淘宝菜单,因为CSS以及JS都是从淘宝扒下来的,只不过为了演示方便,去除了无用功能,如上图所示。
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <...
本文实例讲述了基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果。分享给大家供大家参考。具体如下: 这是一款黑色风格的CSS菜单,带阴影和小箭头效果,纯CSS技术实现的,没有借助任何的JavaScript代码,风格非常...
鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺...
一款非常漂亮的动态下拉菜单效果,这是烈火在linux.cn(linux中国)发现的,于是将代码取下来,供大家学习和研究之用,如用于商业请联系作者。 演示:http://www.veryhuo.com/a/demo/2010/dtxlcd/demo.html ...
jQuery响应式菜单是响应式网站的下拉菜单。 它是一个jQuery插件,其中包括一个JavaScript文件和CSS文件以及示例HTML。 描述:下拉菜单jQuery插件,用于响应式布局 仓库: : 演示: : Bower :jQuery响应菜单 ...
本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法。分享给大家供大家参考。具体如下: 这里介绍的jQuery多级下拉菜单导航-多级下拉菜单,英文名叫 DropDown Menu。通过 each() 遍历添加相应的处理事件 ...
本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果。分享给大家供大家参考。具体如下: 这是一个支持多级显示的JS菜单,鼠标移向带有小三角的菜单项,可下拉出二级子菜单项,在该主菜单的上方会显示标记,...
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示。 再通过选项的选择-(每...
Web的完整工具提示,弹出框,下拉菜单和菜单解决方案 演示和文档 :right_arrow: 安装 包装经理 # npm npm i tippy.js # Yarn yarn add tippy.js 导入tippy构造函数和核心CSS: import tippy from 'tippy.js' ; ...
智能下拉菜单 smart-dropdown-menu是用于下拉菜单的库,具有悬停检测对角光标移动的功能。 描述 smart-dropdown-menu不使用mousemove事件。 通过<li> :before和:after获得对角光标移动的悬停检测 演示版 注意:之...
统计仪表板使用纯CSS和html制作的统计信息仪表板。学分设计: 图标:演示版截屏托多斯 做出回应 添加工具提示添加JavaScript功能通知下拉菜单设备月份标签我学到的是CSS网格模板区域使用CSS网格和Flex进行响应式设计
通过菜单末尾的汉堡包图标旁边的count标记通知用户此操作,该标记充当隐藏列表的下拉触发按钮。演示用法 < head >< link href =" greedynav.css " rel =" stylesheet " type =" text/css " >< ...
12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景...
12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景...