一个css javascript的二级横向菜单

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量798 收藏 1
点赞数
文章标签： javascript css function 产品 float border

  演示地址: http://www.wowo-design.com/view/51_01/index.htm

<html >
<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: 980px; position: absolute; float:left;
}
#nav li ul li{
  float: left; width: 80px;
  background: #F6F6F6;
}
#nav li ul a{
  display: block; width: 80px;text-align:center;
}
#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: 0;
}
#nav li.sfhover ul {
  left: 0;
}
#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.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>

foreverfp
关注
[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页
ormstq的博客
01-17 3408
横向二级导航菜单 Web页面设计实例
html js 左侧二级菜单,横向二级导航菜单(html+css+js)
weixin_42522552的博客
05-31 1357
/*基本信息*/body{margin: 0;padding: 0;background: #FFFFFF;}/*导航*/#navigation{font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */height: 32px;background: #999999;}....
css+div实现精美导航条 横向排列下拉子菜单
12-26
css+div实现的精美导航条，有下拉的横向排列子菜单。javascript实现动画浮动效果。
一个css+javascript的二级横向菜单
netxdiy的blog
11-22 214
演示地址: http://www.wowo-design.com/view/51_01/index.htm &lt;html&gt;&lt;head&gt;&lt;metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/&gt;&lt;title&gt;css菜单演示&lt;/title&gt;&l
纯css制作的横向二级菜单 html
weixin_51343683的博客
11-14 911
效果图： 鼠标放到栏目5上时： <!doctype html> <html> <head> <style type="text/css"> .nav ul{list-style: none;} .nav ul li{float: left;} .nav ul li ul{display: none;} .nav ul li:hover ul{display: block;} .nav a{t
二级下拉菜单布局（纵向、横向）
热门推荐
Number7421的博客
04-27 2万+
一级菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下：&lt;ul class="clearfix"&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
weixin_42346710的博客
08-04 1307
内容介绍热点排行相关文章下载地址↓纯CSS实现，无JavaScript，效果不错，实用性强，兼容各种浏览器！第一步：下载源代码及背景图片第二步：在网页区添加样式定义[code]/* ================================================================This copyright notice must be untouched at al...
html网页横向一级菜单,横向二级导航菜单(html+css+js)
weixin_34622572的博客
06-03 2033
/*基本信息*/body{margin: 0;padding: 0;background: #FFFFFF;}/*导航*/#navigation{font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */height: 32px;background: #999999;}....
DIV CSS制作二级横向弹出菜单，略简单
QDY5945的博客
11-18 422
没有使用JavaScript控制二级菜单的显示，结果如上图所示。 代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"...
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
在本文中，我们将探讨如何使用jQuery和CSS技术创建一个炫丽的横向二级下拉菜单，同时提供源码供下载。这个菜单设计适用于网站导航，它不仅具有良好的视觉效果，还能帮助用户更方便地访问二级子菜单中的内容。 首先...
js实现的二级横向菜单条实例
10-23
根据给定文件信息，可以提炼出以下知识点： 1. JS实现二级横向菜单条的核心原理： ...以上就是根据给定文件信息提炼出来的相关知识点，这些知识点对理解如何使用JavaScript实现交互式的二级横向菜单条有着重要的帮助。
jquery+css实现横向二级下拉菜单
06-06
本教程将深入探讨如何使用jQuery和CSS技术实现一个流畅且效果出色的横向二级下拉菜单。 首先，我们需要理解jQuery和CSS在创建这种菜单中的作用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及...
jquery+css实现的红色线条横向二级菜单效果
10-23
在本文中，我们将探讨如何使用jquery和css来实现一个红色线条横向二级菜单效果。这一效果的实现不仅需要我们在css样式上进行精心设计，还需要借助jquery的强大功能来动态地遍历和切换页面元素，以达到设计者希望的...
JavaScript实现下拉二级菜单详解
qq_40641206的博客
02-13 5082
下拉菜单最终效果如图： 实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果 初始时可以改变 1.display：none;使其隐藏 2.height：0px;改变高度使其隐藏 –>加上下面代码可以实现菜单的上升下拉逐渐出现动画效果 transition: height 2s ease; 3.opacity：0；改变透明度使其隐藏 –>加上...
Echarts 折线图
weixin_44443380的博客
11-08 241
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 912
关于vue2API的面试题
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 519
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 386
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
css导航栏横向二级菜单onmouseover
10-26
CSS导航栏横向二级菜单onmouseover是一种常见的网页导航栏设计方式。它通过CSS的定位属性和JavaScript的事件监听实现了鼠标悬停在主菜单上时，显示对应的二级菜单的效果。具体实现方法如下： 1. 使用CSS设置主菜单和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值