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

2020-11-27 来源：赴品旅游

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
这一个也不错

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><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></HEAD> 
<BODY> 
 
 
 <LI>DEMOS 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <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 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <LI>styled 
 form </LI> 
 <LI>removing 
 active/focus borders </LI> 
 <LI>hover/click 
 </LI></TD></TR></TBODY></TABLE> 
 
</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></TD></TR></TBODY></TABLE> 
 
</LI> 
 <LI>BOXES 
 --> 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <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></TD></TR></TBODY></TABLE> 
 
</LI> 
 <LI>MOZILLA 
 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <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></TD></TR></TBODY></TABLE> 
 
</LI> 
 <LI>EXPLORER 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <LI>the first 
 example for Internet Explorer </LI> 
 <LI>weft fonts 
 </LI> 
 <LI>vertically 
 aligning text </LI></TD></TR></TBODY></TABLE> 
 
</LI> 
 <LI>OPACITY 
 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <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 
 
 <TABLE> 
 <TBODY> 
 <TR> 
 <TD> 
 
 <LI>styled 
 form </LI> 
 <LI>removing 
 active/focus borders </LI> 
 <LI>hover/click 
 </LI></TD></TR></TBODY></TABLE> 
 
</LI></TD></TR></TBODY></TABLE> 
 
</LI></BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
http://www.jluvip.com/works/css/dropmenu/dropmenu.html

显示全文

全部栏目

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