`

采用CSS和JS,刚好我最近有个站点要用到下拉菜单!

阅读更多
<!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" content="text/html; charset=gb2312" />
<title>nav</title>
<script language="javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
<!--
body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
</head>

<body>
<ul id="nav"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a> 
<ul> 
<li><a href="#">History</a></li> 
<li><a href="#">Team</a></li> 
<li><a href="#">Offices</a></li> 
</ul> 
</li> 
<li><a href="#">Services</a> 
<ul> 
<li><a href="#">Web Design</a></li> 
<li><a href="#">Internet Marketing</a></li> 
<li><a href="#">Hosting</a></li> 
<li><a href="#">Domain Names</a></li> 
<li><a href="#">Broadband</a></li> 
</ul> 
</li> 
<li><a href="#">Contact Us</a> 
<ul> 
<li><a href="#">United Kingdom</a></li> 
<li><a href="#">France</a></li> 
<li><a href="#">USA</a></li> 
<li><a href="#">Australia</a></li> 
</ul> 
</li> 

</ul> 
</body>
</html>



分享到:
评论

相关推荐

    图文下拉菜单.zip

    "图文下拉菜单.zip"是一个专门针对这一需求设计的资源,它利用了流行的JavaScript库jQuery来实现一个功能丰富的二级导航菜单。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    jQuery简单实现两级下拉菜单效果代码

    这样的两级下拉菜单结构在实际的Web应用中非常常见,特别是在需要有大量导航链接的站点上,它可以让用户更方便地访问到想要的内容。此外,这种菜单实现方式简单、易于理解和维护,并且可以自定义样式和动画效果,使...

    基于Next5主题美化的一款hexo博客主题

    4. **JavaScript开发**:在博客主题中,JavaScript常用于实现交互功能,例如下拉菜单、轮播图、时间轴动画等。开发者可以使用原生JavaScript,或者引入第三方库如jQuery、Vue.js等来简化代码并增强功能。 5. **CSS...

    leopard是一个简洁的博客模板

    1. **交互性增强**:JavaScript可以增加动态效果,如滚动导航、模态窗口、下拉菜单等,提升用户的交互体验。 2. **表单验证**:在用户提交表单前,JavaScript可以进行前端验证,避免无效或不完整的信息提交。 3. **...

    bootstrap源文件包

    这个"bootstrap源文件包"包含了Bootstrap框架的核心资源,包括CSS、JavaScript和可定制的源码,是深入理解和自定义Bootstrap的关键。 在描述中提到的"bootstrap 文档代码"意味着这个压缩包可能包含了Bootstrap的...

    仿淘宝网html网页模板

    - **JavaScript交互(JavaScript Interactivity)**:例如,搜索功能、下拉菜单、购物车操作等,可能涉及到DOM操作、事件监听和AJAX请求。 - **SEO优化(Search Engine Optimization)**:学习如何通过合理使用`...

    王者荣耀静态网站

    在这个项目中,JavaScript可以用于处理用户交互,比如表单验证、轮播图切换、下拉菜单展开等动态功能。同时,如果网站需要实时更新数据,如最新的比赛结果、玩家排行榜等,可以借助Ajax异步请求,从服务器获取数据并...

    分页和范围下拉框

    在开发这个功能时,通常会用到的技术栈包括但不限于HTML/CSS/JavaScript(可能结合React、Vue等前端框架)、Ajax异步请求、后端语言(如Java、Python、Node.js)以及数据库查询优化。同时,为了提升用户体验,还需要...

    故国博博物馆官网(静态前端页面,详情请看故国博物馆官网,前端效果基本实现)static_.zip

    在描述中,“故国博博物馆官网(静态前端页面,详情请看故国博物馆官网,前端效果基本实现)static_”再次确认了这是一个静态页面的实现,意味着它可能包含了HTML、CSS和JavaScript等前端技术的代码文件,用于复现...

    amazeui html5手机自适应 汽车救援网模板

    3. **组件丰富**:AmazeUI提供了多种可复用的UI组件,如导航、按钮、表单、下拉菜单等,这些组件已经进行了样式统一和交互优化,开发者可以快速搭建功能完善的页面。在汽车救援网模板中,可能会用到如地图、联系方式...

    基于ASP的公交查询系统的设计与实现(源代码+论文)

    开发者需要掌握HTML、CSS和JavaScript来创建用户友好的界面,实现交互功能,如搜索框、下拉菜单、按钮等。 4. **地理信息系统(GIS)**:公交查询系统可能涉及到地理位置信息的处理,如地图展示、路线规划。虽然ASP...

    导航类网站

    5. **交互元素**:按钮、图标、下拉菜单等交互元素的设计和布局要符合用户习惯,确保操作流畅。 6. **色彩与视觉效果**:“大气”和“合理”的UI设计意味着色彩搭配和谐,视觉层次分明,字体大小和行间距适中,使...

    个人主页模板HTML

    8. **JavaScript**:用于实现动态功能,如滑动图片、下拉菜单、表单验证等。可能以`.js`文件形式存在,通过`&lt;script&gt;`标签引入。 9. **图像和媒体**:个人主页可能包含个人照片、作品缩略图或其他视觉元素,这些...

    Small-yards-bay:将自己平时常用到的的网站和资源,集合成一个导航页,方便查找浏览

    3. JavaScript文件:如果项目包含交互功能,比如下拉菜单、搜索框或者动态加载内容,那么JavaScript将用于实现这些功能。它增强了用户体验,让导航页更加动态和用户友好。 4. 图像和其他媒体文件:可能包含logo、...

    ASP.NET交通信息网上查询系统的设计与实现(源代码+开题报告).rar

    6. **用户界面**:系统提供用户友好的界面,可能包括搜索框、下拉菜单、表格展示等功能,以便用户输入查询条件并查看结果。这涉及到HTML、CSS和JavaScript的使用,以实现动态效果和交互性。 7. **安全性与性能**:...

    ExtAspNet_v2.3.2_dll

    +所有的面板默认有两个集合属性(Toolbars和Items). -尽管TabStrip, From, Tree, Accordion继承了Items属性,但是你并不能对其设置(此时Items是只读的). -这将会影响所有的aspx页面,一定要将工具条...

    HTML+Element-ui邮件管理前端界面manage_.zip

    Element-UI是基于Vue.js的组件库,提供了一系列预先设计和封装的UI组件,如按钮、表格、下拉菜单、日期选择器等,大大简化了前端开发过程。在邮件管理界面中,以下是一些可能用到的Element-UI组件: 1. **导航栏...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +所有的面板默认有两个集合属性(Toolbars和Items). -尽管TabStrip, From, Tree, Accordion继承了Items属性,但是你并不能对其设置(此时Items是只读的). -这将会影响所有的aspx页面,一定要将工具条...

    无忧上网导航 wuyou.us

    HTML定义了页面结构,CSS负责样式布局,JavaScript则提供了交互性,例如搜索框的实时查询或下拉菜单。 4. **GBK编码**:GBK是GB2312的扩展,包含更多的中文字符,适用于中文网站。在处理中文内容时,确保文件和...

    Angelo1612.github.io:创建我的第一个GitHub Pages存储库

    在本项目"Angelo1612.github.io:创建我的第一个GitHub Pages存储库"中,Angelo1612分享了他如何建立个人的GitHub Pages网站。GitHub Pages 是 GitHub 提供的一项服务,允许用户免费托管静态网站。这个过程通常涉及...

Global site tag (gtag.js) - Google Analytics