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

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了
</p> <p>*{font:normal normal 14px/1.5em "宋体";}<br /> li{list-style:none;}<br /> span{display:block;line-height:25px;}<br /> a{text-decoration:none;display:block;margin:5px;}<br /> .class1{<br /> width:100px;<br /> height:25px;<br /> overflow-y:hidden;<br /> border:1px solid #ffe663;<br /> text-align:center;<br /> background:#fff2d9;<br /> } </p> <p>.class2{<br /> width:100px;<br /> height:135px;<br /> overflow-y:hidden;<br /> border:1px solid #ffe663;<br /> text-align:center;<br /> background:#fff2d9;<br /> } </p> <p>a:hover{<br /> border:1px dashed red;<br /> } </p> <li class="class1"> <span>下挂菜单</span> </li> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
这一个也不错
</p> <p><!-- saved from url=(0054)http://www.jluvip.com/works/css/dropmenu/dropmenu.html --><br /> <title>the ultimate css only dropdown menu</title> </p> <p>.menu {<br /> font-size: 0.85em; width: 750px; font-family: verdana, sans-serif; position: relative<br /> }<br /> .menu ul {<br /> padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none<br /> }<br /> .menu ul li {<br /> float: left; position: relative<br /> }<br /> .menu ul li a {<br /> 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<br /> }<br /> .menu ul li a:visited {<br /> 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<br /> }<br /> * html .menu ul li a {<br /> width: 139px<br /> }<br /> .menu ul li a:visited {<br /> width: 139px<br /> }<br /> .menu ul li ul {<br /> display: none<br /> }<br /> table {<br /> font-size: 1em; margin: -1px; border-collapse: collapse<br /> }<br /> .menu ul li:hover a {<br /> background: #bd8d5e; color: #fff<br /> }<br /> .menu ul li:hover ul {<br /> margin-top: 1px; display: block; left: 0px; width: 150px; position: absolute; top: 3em<br /> }<br /> .menu ul li:hover ul li ul {<br /> display: none<br /> }<br /> .menu ul li:hover ul li a {<br /> 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<br /> }<br /> .menu ul li:hover ul li a.drop {<br /> background: url(drop.png) #c9c9a7 no-repeat right bottom<br /> }<br /> .menu ul li:hover ul li a:hover {<br /> background: #c9c9a7; color: #000<br /> }<br /> .menu ul li:hover ul li:hover ul {<br /> display: block; left: 150px; width: 150px; position: absolute; top: 0px<br /> }<br /> .menu ul li:hover ul li:hover ul.left {<br /> left: -150px<br /> } </p> <p><!--[if lte ie 6]>--> </p> <ul> <li>demos<!--[if ie 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>zero<br /> dollars advertising page </li> <li>wrapping text<br /> around images </li> <li>styled form </li> <li>active<br /> focus </li> <li>hover/click<br /> with no borders<!--[if ie 7]> >--><!-- </p> <table> <tbody> <tr> <td> <ul> <li>styled<br /> form </li> <li>removing<br /> active/focus borders </li> <li>hover/click </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> <li class="upone">shadow<br /> boxing </li> <li>image map<br /> for detailed information </li> <li> </li> <li> </li> <li> </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> <li>boxes<!--[if ie 7]>--><br /> --> <!-- </p> <table> <tbody> <tr> <td> <ul> <li>a coded<br /> list of spies </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> <li>mozilla<!--[if ie 7]>--><br /> <!--><!-<![endif]--> </p> <table> <tbody> <tr> <td> <ul> <li>drop down<br /> menu </li> <li>cascading<br /> menu </li> <li>content: </li> <li> </li> <li>i can<br /> build a rainbow with transparent borders </li> <li>a snooker<br /> cue using border art </li> <li>target<br /> practise </li> <li>two tone<br /> headings </li> <li>shadow<br /> text </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> <li>explorer<!--[if ie 7]> >--><!--<br /> <table> <tbody> <tr> <td> <ul> <li>the first<br /> example for internet explorer </li> <li>weft fonts </li> <li>vertically<br /> aligning text </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> <li>opacity<!--[if ie 7]>--><br /> <!--><!-<![endif]--> </p> <table> <tbody> <tr> <td> <ul> <li> </li> <li> </li> <li> </li> <li>partial<br /> opacity ii </li> <li>hover/click<!--[if ie 7]>--><br /> <!--><!-<![endif]--> </p> <table> <tbody> <tr> <td> <ul class="left"> <li>styled<br /> form </li> <li>removing<br /> active/focus borders </li> <li>hover/click </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> </ul> </td> </tr> </tbody> </table> <p><!--[if lte ie 6]>--> </p> </li> </ul> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
http://www.jluvip.com/works/css/dropmenu/dropmenu.html