效果图：
以下是源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>横向下拉菜单</title>
<style type="text/css">
<!--
* {margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
height: 24px;
list-style-type: none;
padding-left:200px;
line-height:24px;
overflow:hidden;
background:#999;
}
#nav a {
display: block;
width: 80px;
text-align:center;
}
#nav a:link {
color:#EEE;
text-decoration:none;
}
#nav a:visited {
color:#EEE;
text-decoration:none;
}
#nav a:hover {
color:#FFF;
text-decoration:none;
font-weight:bold;
background:#CCC;
}
#nav li {
float: left;
width: 80px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width: 520px; //注意,这里一定要设置宽度;
position: absolute;
background:#CCC;
}
#nav li ul li{
float: left;
width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
}
#nav li ul a{
display: block;
width: 65px;
text-align:left;
padding-left:15px;
}
#nav li ul a:link {
color:#F1F1F1;
text-decoration:none;
}
#nav li ul a:visited {
color:#F1F1F1;
text-decoration:none;
}
#nav li ul a:hover {
color:#FFF;
text-decoration:none;
font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left:25%;
}
#nav li.sfhover ul {
left:25%;
}
#content {
clear: left;
}
-->
</style>
<script type="text/javascript">
<!--
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="#">菜单11</a>
</li>
<li>
<a href="#">菜单12</a>
</li>
<li>
<a href="#">菜单13</a>
</li>
<li>
<a href="#">菜单14</a>
</li>
<li>
<a href="#">菜单15</a>
</li>
<li>
<a href="#">菜单16</a>
</li>
<li>
<a href="#">菜单17</a>
</li>
<li>
<a href="#">菜单18</a>
</li>
<li>
<a href="#">菜单19</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单二</a>
<ul>
<li>
<a href="#">菜单21</a>
</li>
<li>
<a href="#">菜单22</a>
</li>
<li>
<a href="#">菜单23</a>
</li>
<li>
<a href="#">菜单24</a>
</li>
<li>
<a href="#">菜单25</a>
</li>
<li>
<a href="#">菜单26</a>
</li>
<li>
<a href="#">菜单27</a>
</li>
<li>
<a href="#">菜单28</a>
</li>
<li>
<a href="#">菜单29</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单三</a>
<ul>
<li>
<a href="#">菜单31</a>
</li>
<li>
<a href="#">菜单32</a>
</li>
<li>
<a href="#">菜单33</a>
</li>
<li>
<a href="#">菜单34</a>
</li>
<li>
<a href="#">菜单35</a>
</li>
<li>
<a href="#">菜单36</a>
</li>
<li>
<a href="#">菜单37</a>
</li>
<li>
<a href="#">菜单38</a>
</li>
<li>
<a href="#">菜单39</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单四</a>
<ul>
<li>
<a href="#">菜单41</a>
</li>
<li>
<a href="#">菜单42</a>
</li>
<li>
<a href="#">菜单43</a>
</li>
<li>
<a href="#">菜单44</a>
</li>
<li>
<a href="#">菜单45</a>
</li>
<li>
<a href="#">菜单46</a>
</li>
<li>
<a href="#">菜单47</a>
</li>
<li>
<a href="#">菜单48</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单五</a>
<ul>
<li>
<a href="#">菜单51</a>
</li>
<li>
<a href="#">菜单51</a>
</li>
<li>
<a href="#">菜单53</a>
</li>
<li>
<a href="#">菜单54</a>
</li>
<li>
<a href="#">菜单55</a>
</li>
<li>
<a href="#">菜单56</a>
</li>
<li>
<a href="#">菜单57</a>
</li>
<li>
<a href="#">菜单58</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单六</a>
<ul>
<li>
<a href="#">菜单61</a>
</li>
<li>
<a href="#">菜单62</a>
</li>
<li>
<a href="#">菜单63</a>
</li>
<li>
<a href="#">菜单64</a>
</li>
<li>
<a href="#">菜单65</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单七</a>
<ul>
<li>
<a href="#">菜单71</a>
</li>
<li>
<a href="#">菜单72</a>
</li>
<li>
<a href="#">菜单73</a>
</li>
<li>
<a href="#">菜单74</a>
</li>
<li>
<a href="#">菜单75</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单八</a>
<ul>
<li>
<a href="#">菜单81</a>
</li>
<li>
<a href="#">菜单82</a>
</li>
<li>
<a href="#">菜单83</a>
</li>
<li>
<a href="#">菜单84</a>
</li>
<li>
<a href="#">菜单85</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
- 大小: 41.5 KB
分享到：
相关推荐
在“js+css经典横向导航栏”中，我们主要探讨的是如何结合JavaScript和CSS来创建一个功能丰富、视觉效果良好的横幅导航。 **CSS（层叠样式表）** 是用于控制网页外观的关键技术。在创建横向导航栏时，CSS可以用来...
在本插件中，可能还运用了CSS3的Flexbox或Grid布局系统来控制导航菜单的布局。Flexbox可以轻松实现水平居中、弹性伸缩等布局效果，确保菜单在不同屏幕尺寸上都能保持良好展示。而Grid布局则更适合构建复杂的网格系统...
综上所述，“仿CmsEasy网站横向二级JS+CSS导航菜单”是一个结合了CSS样式和JavaScript交互的网页组件，它通过优雅的过渡效果和良好的交互设计，为用户提供了一种高效的导航方式。理解和掌握这种菜单的制作方法，对于...
2. **JS+DIV+CSS横向菜单.html**：此文件结合了 `JavaScript` 和 `DIV+CSS`，可能包含更高级的功能，比如动态加载下拉内容或者响应式的菜单布局。`JavaScript` 可以增加更多的交互性，如实时更新菜单状态，或者根据...
在网页设计中，横向下拉菜单是一...以上就是关于“css+js横向下拉菜单”的详细解释，这种技术广泛应用于各种网站，使得用户能够轻松地导航到深层内容。通过理解和实践这些知识点，你可以创建出既美观又实用的下拉菜单。
在提供的代码中，我们看到一个简单的CSS横向导航菜单的示例，它使用了XHTML语法，并结合了JavaScript来实现动态效果。下面我们将详细解析这些关键点： 1. **HTML结构**：首先，HTML结构通常包括一个`<ul>`列表，...
"jQuery+CSS实现横向动感菜单"就是一种常见的交互式导航设计，它利用JavaScript库jQuery的高效性能和CSS的样式控制来创建出类似Flash的平滑过渡效果，但比Flash更轻量级，兼容性更强，且更利于SEO优化。 首先，...
本文将深入探讨如何使用CSS（层叠样式表）和JavaScript技术来创建一款既美观又实用的二级横向导航菜单，主要关注"css+js漂亮蓝色二级横向导航菜单-大全"这一主题。 首先，我们来看CSS在构建导航菜单中的作用。CSS...
本文将深入探讨“3款带阴影超酷css+js横向二级绿色导航菜单”的设计与实现，以及如何利用附带的psd源文件进行自定义。 首先，CSS（层叠样式表）是网页设计中的核心技术，用于控制页面布局和样式。在这些导航菜单中...
纯CSS多级菜单(横向)，HTML代码和CSS代码。使用时直接拷贝到网页即可
总结来说，这些CSS横向下拉菜单导航条的设计不仅注重美观，还兼顾了实用性与交互性。通过灵活运用CSS3特性，我们可以创造出既满足视觉需求，又能提供优质用户体验的导航条，提升网站的整体品质。
总结来说，3级横向导航菜单是一种高效的信息组织方式，结合CSS和JavaScript可以实现丰富的交互和视觉效果。通过理解和掌握相关的前端技术，我们可以创建出既美观又实用的导航菜单，提升网站的整体质量。
本篇文章将深入探讨如何使用JavaScript库jQuery和CSS技术来实现横纵菜单的下拉效果。以下是对这个主题的详细解释： 一、jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和...
在网页设计中，导航栏是页面布局的重要...总之，通过`div+css+ul-li`，我们可以轻松地创建出具有专业外观的横向导航栏。随着技术的发展，可以进一步探索更高级的布局技巧和动态效果，以满足不断进化的网页设计需求。
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速找到网站的主要内容和功能。"jQuery + CSS 实现的简洁漂亮的横向二级菜单"是一个利用这两种技术构建高效、美观且易于使用的菜单系统的实例。jQuery 是一个轻...
在“五款漂亮的CSS横向下拉菜单导航条”中，可能包含了各种设计风格和实现方法，如纯CSS实现、JavaScript辅助、过渡效果的应用等。这些实例提供了实际操作的经验，可以帮助开发者学习和借鉴。 总结，创建漂亮的CSS...
本文将深入探讨如何使用jQuery和CSS技术来创建一款“非常漂亮的横向导航菜单”，即“Fluid Navigation CSS & jQuery”。 首先，我们要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档...
总之，JavaScript实现的三级横向导航菜单是前端开发中的常见需求，它涉及HTML结构、CSS样式以及JavaScript事件处理。通过理解这些基本概念并进行实践，开发者能够创建出更富交互性和用户体验的网页应用。