<!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=utf-8" /> 
<title>CSS Menu</title> 
<style type="text/css"> 
<!-- 
@import"dhtml-horiz.css"; 
--> 
body { 
margin: 0; 
padding: 30px; 
background: #FFF; 
color: #666; 

h1 { 
font: bold 16px Arial, Helvetica, sans-serif; 

p { 
font: 11px Arial, Helvetica, sans-serif; 

a { 
color: #900; 
text-decoration: none; 

a:hover { 
background: #900; 
color: #FFF; 

/*CSS Code for Menu Begin:*/ 
/* Root = Horizontal, Secondary = Vertical */ 
ul#navmenu { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 500px; /*For KHTML*/ 
list-style: none; 
height: 24px; 

ul#navmenu li { 
margin: 0; 
border: 0 none; 
padding: 0; 
float: left; /*For Gecko*/ 
display: inline; 
list-style: none; 
position: relative; 
height: 24px; 

ul#navmenu ul { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 160px; 
list-style: none; 
display: none; 
position: absolute; 
top: 24px; 
left: 0; 

ul#navmenu ul li { 
float: none; /*For Gecko*/ 
display: block !important; 
display: inline; /*For IE*/ 

/* Root Menu */ 
ul#navmenu a { 
border: 1px solid #FFF; 
border-right-color: #CCC; 
border-bottom-color: #CCC; 
padding: 0 6px; 
float: none !important; /*For Opera*/ 
float: left; /*For IE*/ 
display: block; 
background: #EEE; 
color: #666; 
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; 
height: auto !important; 
height: 1%; /*For IE*/ 

/* Root Menu Hover Persistence */ 
ul#navmenu a:hover, 
ul#navmenu li:hover a, 
ul#navmenu li.iehover a { 
background: #CCC; 
color: #FFF; 

/* 2nd Menu */ 
ul#navmenu li:hover li a, 
ul#navmenu li.iehover li a { 
float: none; 
background: #EEE; 
color: #666; 

/* 2nd Menu Hover Persistence */ 
ul#navmenu li:hover li a:hover, 
ul#navmenu li:hover li:hover a, 
ul#navmenu li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 

/* 3rd Menu */ 
ul#navmenu li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 

/* 3rd Menu Hover Persistence */ 
ul#navmenu li:hover li:hover li a:hover, 
ul#navmenu li:hover li:hover li:hover a, 
ul#navmenu li.iehover li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 

/* 4th Menu */ 
ul#navmenu li:hover li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 

/* 4th Menu Hover */ 
ul#navmenu li:hover li:hover li:hover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
background: #CCC; 
color: #FFF; 

ul#navmenu ul ul, 
ul#navmenu ul ul ul { 
display: none; 
position: absolute; 
top: 0; 
left: 160px; 

/* Do Not Move - Must Come Before display:block for Gecko */ 
ul#navmenu li:hover ul ul, 
ul#navmenu li:hover ul ul ul, 
ul#navmenu li.iehover ul ul, 
ul#navmenu li.iehover ul ul ul { 
display: none; 

ul#navmenu li:hover ul, 
ul#navmenu ul li:hover ul, 
ul#navmenu ul ul li:hover ul, 
ul#navmenu li.iehover ul, 
ul#navmenu ul li.iehover ul, 
ul#navmenu ul ul li.iehover ul { 
display: block; 

</style> 
<script type="text/JavaScript"> 
navHover = function() 

var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
for (var i=0; i<lis.length; i++) 

lis[i].onmouseover=function()

this.className+=" iehover"; 

lis[i].onmouseout=function() 

this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 


} if (window.attachEvent) window.attachEvent("onload", navHover); 
</script> 
</head> 
<body> <ul id="navmenu"> 
<li><a href="#">收件人+</a> 
<ul> 
<li><a href="#">技术部+</a> 
<ul> 
<li><a href="#">技术部1</a></li> 
<li><a href="#">技术部2</a></li> 
<li><a href="#">技术部3</a></li> 
<li><a href="#">技术部4</a></li> 
<li><a href="#">技术部5</a></li> 
</ul> 
</li> 
<li><a href="#">行政部+</a> 
<ul> 
<li><a href="#">行政部1</a></li> 
<li><a href="#">行政部2</a></li> 
<li><a href="#">行政部3</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>