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

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了

这一个也不错

<title>THE ULTIMATE CSS ONLY DROPDOWN MENU</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"> .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) #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 } </style>
<meta content="MSHTML 6.00.6000.16441" name="GENERATOR">
<div class="menu"> <ul>
<li>
<a class="drop">DEMOS</a>   <table><tbody><tr><td>         <ul>
<li>
<a title="The zero dollar ads page">zero            dollars advertising page</a> </li>           <li>
<a title="Wrapping text around images">wrapping text            around images</a> </li>           <li>
<a title="Styling forms">styled form</a>            </li>           <li>
<a title="Removing active/focus borders">active            focus</a> </li>           <li>
<a class="drop" title="Hover/click with no active/focus borders">hover/click            with no borders</a>           <table><tbody><tr><td>                 <ul>
<li>
<a title="Styling forms">styled                    form</a> </li>                   <li>
<a title="Removing active/focus borders">removing                    active/focus borders</a> </li>                   <li>
<a title="Hover/click with no active/focus borders">hover/click</a>                    </li>
</ul>
</td></tr></tbody></table>

</li>           <li class="upone">
<a title="Multi-position drop shadow">shadow            boxing</a> </li>           <li>
<a title="Image Map for detailed information">image map            for detailed information</a> </li>           <li>
<a title="fun with background images">fun with            background images</a> </li>           <li>
<a title="fade-out scrolling">fade            scrolling</a> </li>           <li>
<a title="em size images compared">em image            sizes compared</a> </li>
</ul>
</td></tr></tbody></table>

</li>   <li>
<a>BOXES   </a><table><tbody><tr><td>         <ul>
<li>
<a title="a coded list of spies">a coded            list of spies</a> </li>           <li>
<a title="a horizontal vertical menu">vertical            menu</a> </li>           <li>
<a title="an enlarging unordered list">enlarging            unordered list</a> </li>           <li>
<a title="an unordered list with link images">link            images</a> </li>           <li>
<a title="non-rectangular links">non-rectangular</a>            </li>           <li>
<a title="jigsaw links">jigsaw            links</a> </li>           <li>
<a title="circular links">circular            links</a> </li>
</ul>
</td></tr></tbody></table>

</li>   <li>
<a>MOZILLA</a>   <table><tbody><tr><td>         <ul>
<li>
<a title="A drop down menu">drop down            menu</a> </li>           <li>
<a title="A cascading menu">cascading            menu</a> </li>           <li>
<a title="Using content:">content:</a>            </li>           <li>
<a title=":hover applied to a div">mozzie            box</a> </li>           <li>
<a title="I can build a rainbow">I can            build a rainbow with transparent borders</a> </li>           <li>
<a title="Snooker cue">a snooker            cue using border art</a> </li>           <li>
<a title="Target Practise">target            practise</a> </li>           <li>
<a title="Two tone headings">two tone            headings</a> </li>           <li>
<a title="Shadow text">shadow            text</a> </li>
</ul>
</td></tr></tbody></table>

</li>   <li>
<a>EXPLORER</a>   <table><tbody><tr><td>         <ul>
<li>
<a title="Example one">the first            example for Internet Explorer</a> </li>           <li>
<a title="Weft fonts">weft fonts</a>            </li>           <li>
<a title="Vertical align">vertically            aligning text</a> </li>
</ul>
</td></tr></tbody></table>

</li>   <li>
<a>OPACITY</a>   <table><tbody><tr><td>         <ul>
<li>
<a title="colour wheel">a colour            wheel using opaque colours</a> </li>           <li>
<a title="a menu using opacity">a menu            using opacity</a> </li>           <li>
<a title="partial opacity">partial            opacity</a> </li>           <li>
<a title="partial opacity II">partial            opacity II</a> </li>           <li>
<a class="drop" title="Hover/click with no active/focus borders">HOVER/CLICK</a>           <table><tbody><tr><td>                 <ul class="left">
<li>
<a title="Styling forms">styled                    form</a> </li>                   <li>
<a title="Removing active/focus borders">removing                    active/focus borders</a> </li>                   <li>
<a title="Hover/click with no active/focus borders">hover/click</a>                    </li>
</ul>
</td></tr></tbody></table>

</li>
</ul>
</td></tr></tbody></table>

</li>
</ul>
</div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

http://www.jluvip.com/works/css/dropmenu/dropmenu.html

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

相关推荐