css菜单演示 产品介绍 产品一 产品一 产品一 产品一 产品一 产品一 服务介绍 服务二 服务二 服务二 服务二服务二 服务二服务二服务二 服务二 成功案例 案例三 案例 案例三案例三 案例三案例三案例三 关于我们 我们四 我们四 我们四 我们四111 在线演示 演示 演示 演示 演示演示演示 演示演示演示 演示演示 演示演示演示 演示演示演示演示演示 联系我们 联系联系联系联系联系 联系联系联系 联系 联系联系 联系联系 联系联系联系 联系联系联系 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]纯css下拉菜单 老Y天下-网页特效-导航菜单-漂亮的二级下拉菜单 与之间--> /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left; position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } 与之间--> DEMOS DEMOS zero dollars wrapping text styled form active focus shadow boxing image map fun backgrounds fade scrolling em sized images MENUS MENUS spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links LAYOUTS LAYOUTS Fixed 1 Fixed 2 Fixed 3 Fixed 4 minimum width BOXES BOXES spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links MOZILLA MOZILLA drop down menu cascading menu content: mozzie box rainbow box snooker cue target practise two tone headings shadow text EXPLORER EXPLORER example one weft fonts vertical align OPACITY OPACITY opaque colours opaque menu partial opacity partial opacity II [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一般情况复制的东西，尽量不要用editplus复制，容易运行错误。

　　推荐阅读

　　input+select(multiple) 实现下拉框输入值

于是尝试了用input+select来实现，结果如下： 具体代码及演示地址：www.homdian.com/test.aspx 这种方法其实是在下拉框上压一个文本框，能够实现输入，也能够实现下拉框的选择。但根据输入值用用异步的方式绑定>>>详细阅读

本文标题：css+js下拉菜单

地址：http://www.17bianji.com/kaifa2/JS/28691.html

 1/2    1