搜集了几个不错的下拉菜单效果

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了
*{font:normal normal 14px/1.5em "宋体";} li{list-style:none;} span{display:block;line-height:25px;} a{text-decoration:none;display:block;margin:5px;} .class1{ width:100px; height:25px; overflow-y:hidden; border:1px solid #ffe663; text-align:center; background:#fff2d9; } .class2{ width:100px; height:135px; overflow-y:hidden; border:1px solid #ffe663; text-align:center; background:#fff2d9; } a:hover{ border:1px dashed red; } </p> <li class="class1"> <span>下挂菜单</span>万水千山万种风情万山千水万马奔腾</li> <p>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这一个也不错
<!-- saved from url=(0054)http://www.jluvip.com/works/css/dropmenu/dropmenu.html --><title>THE ULTIMATE CSS ONLY DROPDOWN MENU</title> .menu { FONT-SIZE: 0.85em; WIDTH: 750px; FONT-FAMILY: verdana, sans-serif; POSITION: relative } .menu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } .menu UL LI { FLOAT: left; POSITION: relative } .menu UL LI A { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none } .menu UL LI A:visited { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none } * HTML .menu UL LI A { WIDTH: 139px } .menu UL LI A:visited { WIDTH: 139px } .menu UL LI UL { DISPLAY: none } TABLE { FONT-SIZE: 1em; MARGIN: -1px; BORDER-COLLAPSE: collapse } .menu UL LI:hover A { BACKGROUND: #bd8d5e; COLOR: #fff } .menu UL LI:hover UL { MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 3em } .menu UL LI:hover UL LI UL { DISPLAY: none } .menu UL LI:hover UL LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #faeec7; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1.2em; PADDING-TOP: 5px; HEIGHT: auto } .menu UL LI:hover UL LI A.drop { BACKGROUND: url(drop.png-600) #c9c9a7 no-repeat right bottom } .menu UL LI:hover UL LI A:hover { BACKGROUND: #c9c9a7; COLOR: #000 } .menu UL LI:hover UL LI:hover UL { DISPLAY: block; LEFT: 150px; WIDTH: 150px; POSITION: absolute; TOP: 0px } .menu UL LI:hover UL LI:hover UL.left { LEFT: -150px } <!--[if lte IE 6]> <![endif]--> </p> <ul> <li>DEMOS<!--[if IE 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>zero dollars advertising page</li> <li>wrapping text around images</li> <li>styled form</li> <li>active focus</li> <li>hover/click with no borders<!--[if IE 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>styled form</li> <li>removing active/focus borders</li> <li>hover/click</li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> <li class="upone">shadow boxing</li> <li>image map for detailed information</li> <li>fun with background images</li> <li>fade scrolling</li> <li>em image sizes compared</li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> <li>BOXES<!--[if IE 7]> --> <!--<br /> <table> <tbody> <tr> <td> <ul> <li>a coded list of spies</li> <li>vertical menu</li> <li>enlarging unordered list</li> <li>link images</li> <li>non-rectangular</li> <li>jigsaw links</li> <li>circular links</li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> <li>MOZILLA<!--[if IE 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>drop down menu</li> <li>cascading menu</li> <li>content:</li> <li>mozzie box</li> <li>I can build a rainbow with transparent borders</li> <li>a snooker cue using border art</li> <li>target practise</li> <li>two tone headings</li> <li>shadow text</li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> <li>EXPLORER<!--[if IE 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>the first example for Internet Explorer</li> <li>weft fonts</li> <li>vertically aligning text</li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> <li>OPACITY<!--[if IE 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>a colour wheel using opaque colours</li> <li>a menu using opacity</li> <li>partial opacity</li> <li>partial opacity II</li> <li>HOVER/CLICK<!--[if IE 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul class="left"> <li>styled form</li> <li>removing active/focus borders</li> <li>hover/click</li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte IE 6]> <![endif]--></li> </ul> <p>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
http://www.jluvip.com/works/css/dropmenu/dropmenu.html

以上就是搜集了几个不错的下拉菜单效果的详细内容，更多请关注本站其它相关文章！