1. 建立一個CSS文件
#sddm
{
margin: 0 auto;
padding: 0;
z-index: 30;
background-color:#ddeafb;
width: 800px;
height:26px;}
#sddm li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}
#sddm li a
{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 160px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}
#sddm li a:hover
{
background:#7FFFD4;
}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 12px arial}
#sddm div a:hover
{
background: #49A3FF;
color: #FFF}
在html或者JSP文件的body中加入
<body style="text-align:center"><ul id="sddm">
<li><a href="#" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">個人資料</a>
<div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="student_detail.jsp">個人信息</a>
<a href="student_main.jsp">個人通知</a>
</div>
</li>
<li><a href="#" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">論文題目</a>
<div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="title_select.jsp">在線選題</a>
<a href="student_title_detail.jsp">個人題目</a>
<a href="student_teacher_detail.jsp">個人指導教師信息</a>
</div>
</li>
<li><a href="#" onMouseOver="mopen('m3')" οnmοuseοut="mclosetime()">論文進程</a>
<div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="student_doc_select.jsp">編輯文檔</a>
<a href="student_doc_fastsave.jsp">本地上傳文檔</a>
</div>
</li>
<li><a href="#" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">下載幫助</a>
<div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="down_center.jsp">下載支持</a>
<a href="help.jsp">幫助說明</a>
</div>
</li>
</ul>
<div style="clear:both"></div></body>