首先，在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编写的下拉菜单自动生成器，你可自定义每个下拉菜单项的内容，用此工具可快速生成下拉菜单代码，你复制这些代码到你的网页中，就可实现一款漂亮的下拉菜单，如果不满意，你可在此基础上再此扩展。
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 ...
纯css实现二级导航下拉菜单，在一级导航的基础上建二级导航。不使用JavaScript，使用纯css来实现。
当我们制作网页时，有的时候会想拥有一个酷炫且顺滑的下拉菜单，虽然我们使用最基础的css和js也可以完成，但利用jQuery我们只需要非常简短的代码即可完成下面的效果 是不是非常的顺滑呢？鼠标移动到目标上自动的...
一个采用JavaScript编写的下拉菜单自动生成器，你可自定义每个下拉菜单项的内容，用此工具可快速生成下拉菜单代码，你复制这些代码到你的网页中，就可实现一款漂亮的下拉菜单，如果不满意，你可在此基础上再此扩展。
超链接与导航栏03_下拉菜单+网页+Html+CSS+JS 网页设计与制作 基础篇 原创慕课教程【学银在线】。配套教材《网页设计与制作（Html5+CSS3+JavaScript）》，清华大学出版社。
2.1 JavaScript 操作对象的简单介绍-- ...5.4 一个下拉菜单. . . . . . . . . . . . . . . . . 38 5.5 类似于资源管理器的树图 . . . . . . . . . . . . . 42 5.6 一个很好的编辑器 . . . . . . . . . . . . . . . 45
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上...
软件技术文档,WEB应用开发。本文并不是一本集中讨论...◆ 可参考的JavaScript 代码：下拉菜单； ◆ 可参考的JavaScript 代码：类似于资源管理器的树图； ◆ 可参考的JavaScript 代码：一个所见所得的编辑器；
内容概要：介绍了JS数据类型、运算符、语句、函数、对象、正则表达式、事件和JSON等，并通过图片切换、鼠标点击、键盘移动、轮播图和二级菜单等练习来掌握基础的JS语法 ...学习目标：轮播图和下拉菜单
其中精美的日历，下拉菜单，树图是来自国外的共享软件开发者――一些JavaScript 专家写就的。在本 文中加以介绍性引用（版权属于原作者），让大家入门之后，如果想进一步深入JavaScript 的开发的话，这是 优美...
利用这个程序，无需懂得或书写任何复杂的Javas cript和HTML代码，就可以为你的站点建立简洁，交互，便利的以Javas cript为基础强大的下拉导航菜单.这个程序的界面友好且方便使用，你可以对内容，功能以及菜单...
该作者独到的思维见解,以及那通俗易懂的代码,非常适合初学者学习,以及对于有基础的朋友一些思维拓展是非常有帮助的!
5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+SQL版 ...
JavaScript 下拉菜单中的链接
这里包括很多自己搜集的js教程和例子一起拿来大家分享一下。...javascript+css 下拉菜单;javascript_chm;javascript常用例子;JS集合;JavaScript教程;使用正则表达式进行数据校验;JavaScript教程--从入门到精通.等等
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 背景...