首先，在html页面开头加这句话：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
可以避免很多不同浏览器的处理问题
设置背景图片：
#page_header{
background:url("../../common/images/xxx.png") repeat-x scroll 0 0 transparent;
}
页面代码：
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
}
#header{
background: repeat-x url("header_bg.png") ;
height:30px;
width:90%;
margin:0px auto;//居中
}
#header .logo{
float:left;
}
#header .member{
float:right;
line-height:30px;
width:100px;
height:30px;
background: url("arrow.png") no-repeat 70% center;
margin:0 auto;
cursor:pointer;
}
ul{
position:absolute;
top:30px;
left:1198px;
padding:10px 0 0 0;
margin:0;
border:1px solid ;
border-top:none;
width:100px;
height:100px;
display:none;
}
ul li{
list-style-type:none;
height:25px;
line-height:25px;
text-indent:20px;
}
ul li a{
text-decoration:none;
display:block;
background:url("arrow3.gif") no-repeat 5px 45%;
}
ul li a:hover{
background:#fc0 url("arrow4.gif") no-repeat 5px 45%;
}
</style>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#header .member").hover(
function () {
$("ul").css("display","block");
$(this).css("background","url(arrow2.png) no-repeat 70% center");
},
function () {
$("ul").css("display","none");
$(this).css("background","url(arrow.png) no-repeat 70% center");
}
);
});
</script>
</head>
<body>
<div id="header">
<div class="logo"><image src="logo.gif"></div>
<div class="member">
个人中心
<ul>
<li><a href="###">修改密码</a></li>
<li><a href="###">关于我</a></li>
<li><a href="###">账号中心</a></li>
<li><a href="###">订单中心</a></li>
</ul>
</div>
</div>
</body>
</html>
相关推荐
以下是关于JavaScript下拉菜单的一些关键知识点： 1. HTML结构：下拉菜单的基础结构通常由`<select>`标签构建，其中包含一系列`<option>`标签来定义菜单项。然而，为了实现更复杂的交互和自定义样式，开发者通常会...
总结，JavaScript下拉菜单的实现涉及HTML结构、CSS样式和JavaScript交互的综合运用。开发者可以根据需求选择不同的实现方式，从基本的手动编写到利用成熟的库和框架，来创建符合项目需求的、用户友好的下拉菜单。
通过以上的步骤，我们就实现了一个基本的纯JavaScript下拉菜单插件，同时处理了兼容性问题。然而，实际项目中可能还需要进一步优化，比如添加动画效果、防止快速点击时的闪烁现象等。这个简单的例子展示了如何利用...
JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航选项，提高用户界面的可用性和效率。在网页设计中，JavaScript常被用来实现动态效果，如下拉菜单，因为HTML和CSS本身无法实现复杂的交互性。 这个名...
本文将详细讲解如何使用JavaScript和jQuery来实现一个带有缓慢弹出特效的下拉菜单。 首先，我们需要了解JavaScript和jQuery的基础。JavaScript是浏览器端的脚本语言，用于增强网页的交互性，而jQuery是一个...
总的来说，JavaScript四级级联下拉菜单是前端开发中的一个基础但实用的技术，它结合了JavaScript的动态性与HTML的结构化，为用户提供了一种直观且有效的交互方式。理解并掌握这种技术，对于提升Web开发技能和用户...
当我们谈论“Javascript实现的日期下拉菜单”时，我们通常是指利用JavaScript来创建一个用户可以选择特定日期的界面元素，这种交互方式常见于表单提交或者事件预订等场景。下面将详细介绍如何使用JavaScript来实现...
JavaScript制作下拉菜单是网页开发中的常见技巧，它能让用户在有限的空间内访问更多的功能选项，提高用户体验。本文将详细讲解如何使用JavaScript实现一个基本的下拉菜单。 首先，我们需要理解下拉菜单的基本结构。...
JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示多个选项，通常在网站的导航栏或表单中使用。这种菜单通过JavaScript语言实现，提供了动态效果和用户友好的体验，比如点击后展开或收起菜单项。...
JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示丰富的导航选项。在网页设计中，下拉菜单能够有效地组织和展示大量的链接，提高用户体验，尤其在移动设备上节省屏幕空间。本教程将深入探讨多样...
通过学习和实践“Son of Suckerfish Dropdowns”，你可以掌握创建高效、可访问的 JavaScript 下拉菜单的技术，进一步提升你的网页开发技能。同时，这个案例也鼓励开发者在实现交互效果时，兼顾功能性和可访问性，为...
在本资源包“下拉菜单集合”中，包含了多种类型的下拉菜单，包括二级和三级下拉菜单，这些设计通常用于导航栏、设置选项或用户界面的其他部分，以节省屏幕空间并提升用户体验。 一、下拉菜单的基本结构与原理 下拉...
通过本文的学习，你将能够理解并掌握基本的下拉菜单实现方法，并可以在此基础上进行扩展。 #### 二、HTML结构 首先，我们来看一下这个简单的下拉菜单的HTML结构。整个结构由四个`<div>`元素组成：两个作为菜单按钮...
在实际应用中，JavaScript下拉菜单可以具有多种功能，如无限级嵌套、动态加载内容、键盘导航等。这些特性使得JavaScript下拉菜单成为网页开发者的重要工具，尤其是在创建复杂的交互式网站时。 总结来说，...
总之，"javascript下拉菜单"项目是一个很好的学习资源，它涵盖了JavaScript基础、DOM操作、事件处理、CSS样式设计以及响应式和可访问性设计等多个方面，对提升网页交互开发技能非常有帮助。通过深入研究和实践这个...
总结来说，实现自定义的多级联动下拉菜单涉及HTML布局、JavaScript交互和DOM操作。通过合理地组合这些技术，我们可以创建出功能强大且用户体验优秀的下拉菜单，这在很多Web应用中都是不可或缺的一部分。记得实践是...
该下拉菜单的实现主要依赖于JavaScript和CSS。JavaScript负责处理事件监听、数据请求以及DOM（Document Object Model）操作，例如响应鼠标的移动、发送AJAX请求以获取子菜单内容，并动态插入到HTML结构中。CSS则用来...
本文将详细解析"可配置的javascript下拉菜单"这一技术，包括其核心特性、实现原理以及如何利用提供的css.css、hack.css、js.js文件进行自定义配置。 1. **核心特性**： - **多级层联**：此下拉菜单支持多级菜单...