js层级选择框样式_js实现带圆角的多级下拉菜单效果

本文实例讲述了js实现带圆角的多级下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款酷黑的圆角多级下滑菜单，可支持三级，鼠标放上后可见到滑出的菜单，调用了一个JS封装库，代码有些复杂，有兴趣的可研究。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

下拉菜单

ulm_round_corner_size_main = 2;

ulm_round_corner_size_sub = 2;

';if(isget)return wv;else document.write(wv);};function im_rcs(pos,is_cap,topclass){if(is_cap)return '

';else return '

';}

/* --[[ Main Expand Icons ]]-- */

#imenus0 .imeam span,#imenus0 .imeamj span {width:9px; height:9px; left:-10px; top:5px; background-repeat:no-repeat;background-position:top left;}

#imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-repeat:no-repeat;background-position:top left;}

/* --[[ Sub Expand Icons ]]-- */

#imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(images/small_red_pointer.gif); width:7px; height:8px; left:-8px; top:3px; background-repeat:no-repeat;background-position:top left;}

#imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(images/small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;}

/* --[[ Main Container ]]-- */

#imouter0 {background-color:#546347; border-style:solid; border-color:#000000; border-width:0px 1px; padding:0px 2px; margin:0px; }

/* [Rounded Corner Styles] */

.imrcmain0 .imrcolor {background-color:#546347; }

.imrcmain0 .imrbcolor {border-color:#444444; }

.imrcmain0 .imtopspace {height:0px; }

/* --[[ Sub Container ]]-- */

#imenus0 li ul {background-color:#cce7bc; border-style:solid; border-color:#a2a2a2; border-width:0px 1px; padding:5px 7px; }

/* [Rounded Corner Styles] */

#imenus0 .imrcolor {background-color:#cce7bc; }

#imenus0 .imrbcolor {border-color:#a2a2a2; }

#imenus0 .imtopspace {height:6px; }

/* --[[ Main Items ]]-- */

#imenus0 li a, #imenus0 .imctitle {color:#ffffff; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:2px 5px 2px 12px; }

/* [hover] - These settings must be duplicated for IE compatibility.*/

#imenus0 li:hover>a {background-color:#cce7bc; color:#546347; }

#imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#cce7bc; color:#546347; }

/* [active] */

#imenus0 li a.iactive {}

/* --[[ Sub Items ]]-- */

#imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; }

/* [hover] - These settings must be duplicated for IE comptatibility.*/

#imenus0 ul li:hover>a {background-color:transparent; color:#cc0000; }

#imenus0 ul li a.ihover {background-color:transparent; color:#cc0000; }

/* [active] */

#imenus0 ul li a.iactive {background-color:#ffffff; }

/* [Dividers] */

#imenus0 .dvs {border-bottom-width:1px; border-style:dotted; border-color:#546347; padding-bottom:4px; margin-bottom:4px; }

• Who We Are
  • Overview
  • Mission & Goals
  • History
  • Management
  • Working at Tyco
  • Press Center
  • Board of Directors
    • Overview
    • Electronics
    • Fire & Security
    • Healthcare
    • Plastics & Adhesives
    • Engineered Producs
    • Tyco Worldwide
  • Worldwide
    • Europe
    • Asia
    • US & Canada
    • Mexico
    • Australia
    • Middle East
  • Customers
• Our Commitment
  • Overview
  • People & Values
  • Governance
  • Community
  • Environmental
• Our Business
  • Overview
  • Electronics
  • Fire & Security
  • Healthcare
  • Plastics
  • Engineered Producs
  • Tyco Worldwide

  im_round_corners("bottom","sub");

• Investors
  • Overview
  • Stock Quotes

希望本文所述对大家的javascript程序设计有所帮助。