下拉菜单-常用的按钮下拉菜单效果网页特效代码演示

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> 下拉菜单-常用的按钮下拉菜单效果网页特效代码演示

下拉菜单-常用的按钮下拉菜单效果网页特效代码演示

作者:下拉菜单-常用的按钮下拉菜单效果网页特效代码演示发布时间:2007-11-9 23:57:00 发布人: admin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>下拉菜单示例 - 阿里西西</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta content="下拉菜单示例" name="keywords">
<meta content="经典论坛" name="description">
<meta content="MSHTML 6.00.3790.630" name="GENERATOR">
<meta content="TRUE" name="MSSmartTagsPreventParsing">
<meta http-equiv="MSThemeCompatible" content="Yes">
<style>
BODY {
 MARGIN: 0px; COLOR: #000000; BACKGROUND-COLOR: #ffffff
}
BODY {
 FONT: 12px Tahoma, Verdana
}
TABLE {
 FONT: 12px Tahoma, Verdana
}
INPUT {
 FONT: 12px Tahoma, Verdana
}
SELECT {
 FONT: 12px Tahoma, Verdana
}
TEXTAREA {
 FONT: 12px Tahoma, Verdana
}
.maintable {
 FONT: 12px Tahoma, Verdana
}
.button {
 FONT: 12px Tahoma, Verdana
}
.altbg1 {
 FONT: 12px Tahoma, Verdana
}
.altbg2 {
 FONT: 12px Tahoma, Verdana
}
.smalltxt {
 FONT: 11px Tahoma, Verdana
}
.category {
 FONT: 11px Tahoma, Verdana
}
.percenttxt {
 FONT: 11px Tahoma, Verdana
}
.lighttxt {
 COLOR: #666666
}
A {
 COLOR: #000080; TEXT-DECORATION: none
}
A:hover {
 TEXT-DECORATION: underline
}
TABLE {
 COLOR: #000000; BORDER-COLLAPSE: collapse; empty-cells: show
}
INPUT {
 FONT-WEIGHT: normal; COLOR: #000000
}
SELECT {
 FONT-WEIGHT: normal; COLOR: #000000
}
TEXTAREA {
 FONT-WEIGHT: normal; COLOR: #000000
}
INPUT {
 HEIGHT: 21px
}
FORM {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LEGEND {
 COLOR: #000000
}
.checkbox {
 BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; VERTICAL-ALIGN: middle; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; HEIGHT: 16px
}
.radio {
 BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; VERTICAL-ALIGN: middle; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; HEIGHT: 16px
}
.maintable {
 WIDTH: 100%
}
.subtable {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0px; TEXT-ALIGN: left
}
.simpletable {
 CLEAR: both; BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff
}
.simpletable .header {
 PADDING-BOTTOM: 0px; PADDING-TOP: 7px; HEIGHT: 30px; BACKGROUND-COLOR: #ccccd4
}
.simpletable DIV {
 PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px
}
.nav {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 7px; COLOR: #000000; LINE-HEIGHT: normal; PADDING-TOP: 7px; FONT-STYLE: normal; FONT-FAMILY: Tahoma,Verdana; BACKGROUND-COLOR: #ccccd4; FONT-VARIANT: normal; font-size-adjust: none; font-stretch: normal
}
.nav A {
 
}
.subtable .right {
 PADDING-RIGHT: 13px; LINE-HEIGHT: 25px
}
.absmiddle {
 VERTICAL-ALIGN: middle
}
.msgbody {
 OVERFLOW: hidden; WIDTH: 100%
}
.msgheader {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: #dddde4; PADDING-BOTTOM: 5px; MARGIN: 0px 1em; BORDER-LEFT: #666688 1px solid; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #666688 1px solid
}
.msgborder {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: 0px; PADDING-LEFT: 10px; FONT-SIZE: 12px; BACKGROUND: #fdfff2; PADDING-BOTTOM: 10px; MARGIN: 0px 1em; OVERFLOW: hidden; BORDER-LEFT: #666688 1px solid; WIDTH: 100%; PADDING-TOP: 10px; BORDER-BOTTOM: #666688 1px solid; FONT-FAMILY: "Courier New"; WORD-WRAP: break-word
}
.tableborder {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BACKGROUND: white; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; outline: 1px solid #666688
}
.spaceborder {
 CLEAR: both; BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #666688 1px solid; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff
}
.singleborder {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f2f3f7
}
.button {
 
}
.lightbutton {
 
}
.submitbutton {
 MARGIN-TOP: 6px; MARGIN-BOTTOM: 5px; TEXT-ALIGN: center
}
.postsubmit {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; MARGIN-TOP: 6px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4; TEXT-ALIGN: center
}
.bold {
 FONT-WEIGHT: bold
}
.header {
 PADDING-LEFT: 10px; FONT-WEIGHT: bold; COLOR: #000000; HEIGHT: 30px; BACKGROUND-COLOR: #ccccd4
}
.header TD {
 PADDING-LEFT: 10px
}
.header A {
 COLOR: #000000
}
.header INPUT {
 BACKGROUND: none transparent scroll repeat 0% 0%; VERTICAL-ALIGN: middle; HEIGHT: 16px
}
.category {
 FONT-WEIGHT: bold; COLOR: #000000; BACKGROUND-COLOR: #dddde4
}
.category TD {
 BORDER-BOTTOM: #666688 1px solid
}
.altbg1 {
 BACKGROUND: #f2f3f7
}
TD.altbg1 {
 BORDER-BOTTOM: #666688 1px solid
}
.altbg2 {
 BACKGROUND: #ffffff
}
TD.altbg2 {
 BORDER-BOTTOM: #666688 1px solid
}
.row {
 BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: #ffffff; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; empty-cells: show
}
.row TD {
 PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid
}
.row1 {
 BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: #f2f3f7; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; empty-cells: show
}
.row1 TD {
 PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid
}
.bottom {
 BORDER-BOTTOM: 0px
}
.bottom TD {
 BORDER-BOTTOM: 0px
}
TD.bottom {
 BORDER-BOTTOM: 0px
}
.spacebottom {
 BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; BORDER-BOTTOM: 0px
}
.tdunderline TD {
 BORDER-TOP: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid
}
.option {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #666688 1px solid; WIDTH: 98%; PADDING-TOP: 1px; BORDER-BOTTOM: #666688 1px solid; HEIGHT: 35px; BACKGROUND-COLOR: #f2f3f7
}
.avatar {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4
}
.avatar IMG {
 BACKGROUND: #ffffff
}
.left {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
.right {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: right
}
.line {
 BORDER-TOP: #666688 1px solid
}
.percent {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #666688 1px solid; HEIGHT: 12px
}
.percent DIV {
 PADDING-RIGHT: 0px; BACKGROUND-POSITION: 0px 50%; PADDING-LEFT: 0px; FONT-SIZE: 0px; PADDING-BOTTOM: 0px; MARGIN: 1px; WIDTH: 100%; LINE-HEIGHT: 0px; PADDING-TOP: 0px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 8px; BACKGROUND-COLOR: #ccccd4
}
.percenttxt {
 FONT-WEIGHT: bold; FLOAT: left; PADDING-TOP: 1px
}
.percenttxt U {
 FONT-WEIGHT: normal; COLOR: #666666; TEXT-DECORATION: none
}
.mainborder {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 0px; PADDING-TOP: 0px; HEIGHT: 8px; BACKGROUND-COLOR: #666688
}
.wysiwyg {
 BORDER-RIGHT: #dddddd 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #dddddd 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; FONT: 14px Tahoma, Verdana; BORDER-LEFT: #dddddd 1px solid; COLOR: #000000; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #dddddd 1px solid
}
.wysiwyg A {
 COLOR: #000080; TEXT-DECORATION: underline
}
.autosave {
 BEHAVIOR: url(/web/20130415054759im_/http://myjs.jz123.cn/js/caidan/2516.html#default#userdata)
}
#seccode {
 MARGIN-BOTTOM: 2px; CURSOR: pointer
}
.logo {
 BACKGROUND-COLOR: #ffffff
}
.logo DIV.right {
 
}
.mainheader {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px
}
.mainheader A {
 COLOR: #fff
}
.headermenu_popup {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: 0px; MARGIN-TOP: 8px! important; BORDER-LEFT: #666688 1px solid; COLOR: #ffffff; BORDER-BOTTOM: #666688 1px solid
}
.headermenu_popup A {
 COLOR: #ffffff; TEXT-DECORATION: none
}
.menu {
 MARGIN-TOP: 6px; COLOR: #ffffff; HEIGHT: 30px; BACKGROUND-COLOR: #666688
}
.menu DIV {
 TEXT-ALIGN: right
}
.menu DIV {
 COLOR: #ffffff; PADDING-TOP: 6px
}
.menu A {
 COLOR: #ffffff; PADDING-TOP: 6px
}
.menu DIV A {
 COLOR: #ffffff; PADDING-TOP: 6px
}
.menu DIV SPAN {
 HEIGHT: 5px
}
.footerline {
 BORDER-BOTTOM: #666688 1px solid; HEIGHT: 6px
}
.footerline DIV {
 RIGHT: 40px; FLOAT: right; POSITION: relative; TOP: 2px; BACKGROUND-COLOR: #ffffff
}
.p_bar {
 CLEAR: both; MARGIN: 1px 0px
}
.p_bar A {
 PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; TEXT-DECORATION: none
}
.p_input {
 BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 40px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 17px
}
.p_total {
 BORDER-RIGHT: #666688 0px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7
}
.p_pages {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7
}
.p_num {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff
}
A.p_num:hover {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none
}
.p_redirect {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff
}
A.p_redirect:hover {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none
}
.p_curpage {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px solid; COLOR: #000000; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4
}
.popupmenu_popup {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; COLOR: #000000; BORDER-BOTTOM: #666688 1px solid
}
.popupmenu_option {
 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: #666688; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; WHITE-SPACE: nowrap
}
.popupmenu_option A {
 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; TEXT-DECORATION: none
}
.popupmenu_highlight {
 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: #8c8ea3; PADDING-BOTTOM: 3px; CURSOR: pointer; COLOR: #ffffff; PADDING-TOP: 3px; WHITE-SPACE: nowrap
}
.popupmenu_highlight A {
 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; TEXT-DECORATION: none
}
.calendar_expire {
 COLOR: #999999
}
.calendar_expire A:link {
 COLOR: #999999
}
.calendar_expire A:visited {
 COLOR: #999999
}
.calendar_default {
 COLOR: #000000
}
.calendar_default A:link {
 COLOR: #000000
}
.calendar_default A:visited {
 COLOR: #000000
}
.calendar_checked {
 COLOR: #ff0000
}
.calendar_checked A:link {
 COLOR: #ff0000
}
.calendar_checked A:visited {
 COLOR: #ff0000
}
.calendar_today {
 COLOR: #00bb00
}
.calendar_today A:link {
 COLOR: #00bb00
}
.calendar_today A:visited {
 COLOR: #00bb00
}
.calendar_header TD {
 WIDTH: 30px; HEIGHT: 20px
}
#calendar_year {
 DISPLAY: none; Z-INDEX: 10; BACKGROUND: #ffffff; LINE-HEIGHT: 130%; POSITION: absolute
}
#calendar_year .col {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ffffff; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN-LEFT: 1px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid
}
#calendar_month {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #666688 1px solid; DISPLAY: none; PADDING-LEFT: 4px; Z-INDEX: 11; BACKGROUND: #ffffff; PADDING-BOTTOM: 4px; BORDER-LEFT: #666688 1px solid; LINE-HEIGHT: 130%; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid; POSITION: absolute
}
#announcement {
 CLEAR: both; BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #666688 1px solid; DISPLAY: none; PADDING-LEFT: 1px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666688 1px solid; WIDTH: 98%; PADDING-TOP: 5px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4
}
.todayposts {
 COLOR: #000080
}
.newspecial {
 FONT-WEIGHT: bold; FONT-SIZE: 14px; TEXT-ALIGN: center
}
.newspecialmenu {
 WIDTH: 88px
}
.f_folder {
 TEXT-ALIGN: center
}
.f_icon {
 TEXT-ALIGN: center
}
.f_title {
 WORD-BREAK: break-all
}
.f_title SPAN {
 COLOR: #666666
}
.subject A {
 COLOR: #000000
}
.f_title A {
 COLOR: #000000
}
.f_author {
 BACKGROUND: #f2f3f7; TEXT-ALIGN: center
}
.f_views {
 BACKGROUND: #f2f3f7; TEXT-ALIGN: center
}
.f_replies {
 TEXT-ALIGN: center
}
.f_last {
 BACKGROUND: #f2f3f7
}
.t_row {
 MARGIN-TOP: -1px
}
.t_user {
 PADDING-LEFT: 8px; BACKGROUND: #f2f3f7; WORD-BREAK: break-all
}
.t_msg {
 TABLE-LAYOUT: fixed; BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%; WORD-WRAP: break-word
}
.t_msg P {
 MARGIN: 0px
}
.t_msg TD {
 PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.t_signature {
 
}
.t_number {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 2px; BACKGROUND: #f3f8d7; PADDING-BOTTOM: 2px; MARGIN: 1px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #666688 1px solid
}
.t_infoline {
 BACKGROUND: #f3f8d7
}
.t_table {
 BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; border-spacing: 0px
}
.t_table TD {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid
}
.t_attach {
 BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ffffff; PADDING-BOTTOM: 4px; BORDER-LEFT: #666688 1px solid; WIDTH: 350px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid
}
.t_attachlist {
 PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BORDER-BOTTOM: #666688 1px solid
}
.t_msgfont {
 FONT-SIZE: 14px
}
.t_msgfont TABLE {
 FONT-SIZE: 14px
}
.t_smallfont {
 
}
.t_smallfont TABLE {
 
}
.t_bigfont {
 
}
.t_bigfont TABLE {
 
}
.leftmenu BR {
 LINE-HEIGHT: 5px
}
.leftmenu {
 LINE-HEIGHT: 18px
}

</style>
<script>
var sPop = null;
var postSubmited = false;
var smdiv = new Array();

var userAgent = navigator.userAgent.toLowerCase();
var is_webtv = userAgent.indexOf('webtv') != -1;
var is_kon = userAgent.indexOf('konqueror') != -1;
var is_mac = userAgent.indexOf('mac') != -1;
var is_saf = userAgent.indexOf('applewebkit') != -1 || navigator.vendor == 'Apple Computer, Inc.';
var is_opera = userAgent.indexOf('opera') != -1  &&  opera.version();
var is_moz = (navigator.product == 'Gecko'  &&  !is_saf)  &&  userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
var is_ns = userAgent.indexOf('compatible') == -1  &&  userAgent.indexOf('mozilla') != -1  &&  !is_opera  &&  !is_webtv  &&  !is_saf;
var is_ie = (userAgent.indexOf('msie') != -1  &&  !is_opera  &&  !is_saf  &&  !is_webtv)  &&  userAgent.substr(userAgent.indexOf('msie') + 5, 3);

function $(id) {
 return document.getElementById(id);
}

function in_array(needle, haystack) {
 if(typeof needle == 'string') {
  for(var i in haystack) {
   if(haystack[i] == needle) {
     return true;
   }
  }
 }
 return false;
}

function trim(str) {
 return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
}

function isUndefined(variable) {
 return typeof variable == 'undefined' ? true : false;
}

function addbookmark(url, site){
 if(is_ie) {
  window.external.addFavorite(url, site);
 } else {
  alert('Please press "Ctrl+D" to add bookmark');
 }
}

function doane(event) {
 e = event ? event : window.event ;
 if(is_ie) {
  e.returnValue = false;
  e.cancelBubble = true;
 } else {
  e.stopPropagation();
  e.preventDefault();
 }
}

var jsmenu = new Array();
jsmenu['active'] = new Array();
jsmenu['timer'] = new Array();
jsmenu['iframe'] = new Array();

function initCtrl(ctrlobj, click, duration, timeout, layer) {
 if(ctrlobj  &&  !ctrlobj.initialized) {
  ctrlobj.initialized = true;
  ctrlobj.unselectable = true;

ctrlobj.outfunc = typeof ctrlobj.onmouseout == 'function' ? ctrlobj.onmouseout : null;
  ctrlobj.onmouseout = function() {
   if(this.outfunc) this.outfunc();
   if(duration < 3) jsmenu['timer'][ctrlobj.id] = setTimeout('hideMenu(' + layer + ')', timeout);
  }

if(click  &&  duration) {
   ctrlobj.clickfunc = typeof ctrlobj.onclick == 'function' ? ctrlobj.onclick : null;
   ctrlobj.onclick = function (e) {
    doane(e);
    if(jsmenu['active'][layer] == null || jsmenu['active'][layer].ctrlkey != this.id) {
     if(this.clickfunc) this.clickfunc();
     else showMenu(this.id, true);
    } else {
     hideMenu(layer);
    }
   }
  }

ctrlobj.overfunc = typeof ctrlobj.onmouseover == 'function' ? ctrlobj.onmouseover : null;
  ctrlobj.onmouseover = function(e) {
   doane(e);
   if(this.overfunc) this.overfunc();
   if(click) {
    clearTimeout(jsmenu['timer'][this.id]);
   } else {
    for(var id in jsmenu['timer']) {
     if(jsmenu['timer'][id]) clearTimeout(jsmenu['timer'][id]);
    }
   }
  }
 }
}

function showMenu(ctrlid, click, offset, duration, timeout, layer, showid, maxh) {
 var ctrlobj = $(ctrlid);
 if(!ctrlobj) return;
 if(isUndefined(click)) click = false;
 if(isUndefined(offset)) offset = 0;
 if(isUndefined(duration)) duration = 2;
 if(isUndefined(timeout)) timeout = 500;
 if(isUndefined(layer)) layer = 0;
 if(isUndefined(showid)) showid = ctrlid;
 var showobj = $(showid);
 var menuobj = $(showid + '_menu');
 if(!showobj|| !menuobj) return;
 if(isUndefined(maxh)) maxh = 400;

hideMenu(layer);

for(var id in jsmenu['timer']) {
  if(jsmenu['timer'][id]) clearTimeout(jsmenu['timer'][id]);
 }

initCtrl(ctrlobj, click, duration, timeout, layer);
 initMenu(ctrlid, menuobj, duration, timeout, layer);

menuobj.style.display = '';
 if(!is_opera) {
  menuobj.style.clip = 'rect(auto, auto, auto, auto)';
 }

var showobj_pos = fetchOffset(showobj);
 var showobj_x = showobj_pos['left'];
 var showobj_y = showobj_pos['top'];
 var showobj_w = showobj.offsetWidth;
 var showobj_h = showobj.offsetHeight;
 var menuobj_w = menuobj.offsetWidth;
 var menuobj_h = menuobj.offsetHeight;

menuobj.style.left = (showobj_x + menuobj_w > document.body.clientWidth)  &&  (showobj_x + showobj_w - menuobj_w >= 0) ? showobj_x + showobj_w - menuobj_w + 'px' : showobj_x + 'px';
 menuobj.style.top = offset == 1 ? showobj_y + 'px' : (offset == 2 || ((showobj_y + showobj_h + menuobj_h > document.body.scrollTop + document.body.clientHeight)  &&  (showobj_y - menuobj_h >= 0)) ? (showobj_y - menuobj_h) + 'px' : showobj_y + showobj_h + 'px');

if(menuobj.style.clip  &&  !is_opera) {
  menuobj.style.clip = 'rect(auto, auto, auto, auto)';
 }

if(is_ie  &&  is_ie < 7) {
  if(!jsmenu['iframe'][layer]) {
   var iframe = document.createElement('iframe');
   iframe.style.display = 'none';
   iframe.style.position = 'absolute';
   //iframe.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
   $('jsmenu_parent') ? $('jsmenu_parent').appendChild(iframe) : menuobj.parentNode.appendChild(iframe);
   jsmenu['iframe'][layer] = iframe;
  }
  jsmenu['iframe'][layer].style.top = menuobj.style.top;
  jsmenu['iframe'][layer].style.left = menuobj.style.left;
  jsmenu['iframe'][layer].style.width = menuobj_w;
  jsmenu['iframe'][layer].style.height = menuobj_h;
  jsmenu['iframe'][layer].style.display = 'block';
 }

if(maxh  &&  menuobj.scrollHeight > maxh) {
  menuobj.style.height = maxh + 'px';
  if(is_opera) {
   menuobj.style.overflow = 'auto';
  } else {
   menuobj.style.overflowY = 'auto';
  }
 }

if(!duration) {
  setTimeout('hideMenu(' + layer + ')', timeout);
 }

jsmenu['active'][layer] = menuobj;
}

function menuoption_onclick_function(e) {
 this.clickfunc();
 hideMenu();
}

function menuoption_onclick_link(e) {
 choose(e, this);
}

function menuoption_onmouseover(e) {
 this.className = 'popupmenu_highlight';
}

function menuoption_onmouseout(e) {
 this.className = 'popupmenu_option';
}

<a href="http://web.archive.org/web/20130415054759/http://js.jz123.cn/">欢迎访问阿里西西网页脚本特效集</a>

下拉菜单-常用的按钮下拉菜单效果网页特效代码演示

将本文收藏到QQ书签与更多好友分享

上一篇：文章：非常不错的一个DIV+CSS客齐集的导航特效下一篇：文章：漂亮的左侧渐显动态菜单网页特效代码演示

网页特效

下拉菜单-常用的按钮下拉菜单效果网页特效代码演示

本类浏览排行 »

本站推荐文章 »

网页特效

下拉菜单-常用的按钮下拉菜单效果 网页特效代码演示

本类浏览排行 »

本站推荐文章 »

下拉菜单-常用的按钮下拉菜单效果网页特效代码演示