Now the Drop-down menu is more and better compatibility, do not use the best JS, but if you can use the least code to achieve the effect, is also a good
first, the use of JS, but very short, also very clear
<style> *{font:normal normal 14px/1.5em "song Body";} 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; } </style> <div> <li onmouseover= "this.classname= ' class2 '" onmouseout= "this.classname= ' Class1 '" class = "Class1" > <span> under the Hanging menu </span> thousands of different styles of water steeds </li> </div>
[ctrl+a All selected note: If you need to introduce external JS need to refresh to perform]
This one's good, too.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "> <!--saved from Url= (0054) http://www.jluvip.com/works/css/dropmenu/dropmenu.html--> xmlns= "http://www.w3.org/1999/xhtml" ><pead><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> <!--[if LTE IE 6]> <l Ink rel= "stylesheet" media= "All" type= "Text/css" href= "Final_drop_ie.css"/> <! [endif]--> <meta content= "MSHTML 6.00.6000.16441" name=generator></pead> <BODY> <DIV class= menu> <UL> <LI>DEMOS<!--[if IE 7]> <!--><!--<! [endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <li& Gt;<a title= "The Zero Dollar Ads page" href= "http://www.jluvip.com/works/css/menu/zero_dollars.html" >zer o dollars advertising page</a> </LI> <li><a title= "Wrapping tExt around Images "href=" http://www.jluvip.com/works/css/menu/embed.html ">wrapping text around images</a> </LI> <li>styled form </LI> <li><a title= "Re Moving active/focus borders "href= http://www.jluvip.com/works/css/menu/nodots.html" >active FOC us</a> </LI> <li><a class=drop title= "Hover/click with no active/focus borders" href= "http://www.jluvip.com/works/css/menu/hover_click.html" >hover/click with no borders<!--[if IE 7]& Gt <!--></A><!--<! [endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <li><a title= "Styling Forms" href= "http://www.jluvip . com/works/css/menu/form.html ">styled form</a> </LI> < Li><a title= "Removing active/focus borders" href= "http://www.jluvip.com/works/css/menu/nodots.ht" ML ">removing active/focus borders</a> </LI> <li>hover/click </LI></UL></TD></TR></TBODY></TABLE><!--[If LTE IE 6]> < ! [endif]--></li> <li class=upone><a title= "multi-position drop Shadow" href= "http: Www.jluvip.com/works/css/menu/shadow_boxing.html ">shadow boxing</a> </LI> <LI&G T;<a title= "Image Map for detailed information" href= "http://www.jluvip.com/works/css/menu/old_master.html" >image map for detailed information</a> </LI> <li><a title= ' fun with BACKGR Ound images "href=" http://www.jluvip.com/works/css/menu/bodies.html ">fun with background images </A> </li> <li><a title= "fade-out scrolling" href= "http://www.jluvip.com/works/css/menu/fade_scroll.html" >fad E scrolling</a> </LI> <li><a title= "em size images compared" href= "http://www.jluvip.com/works/css/menu/em_images.html" >em image sizes compared</a> </li></ul& gt;</td></tr></tbody></table><!--[If LTE IE 6]> <! [endif]--></li> <li><a href= "http://www.jluvip.com/works/css/boxes/index.html" >BOXES<!-- [If IE 7]>--> </A><!--<! [endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <li& Gt;<a title= "A coded list of Spies" href= "http://www.jluvip.com/works/css/dropmenu/spies.html" >a coded List of spies</a> </LI> <li><a title= "A Horizontal vertical Menu" h Ref= "HTTp://www.jluvip.com/works/css/dropmenu/vertical.html ">vertical menu</a> </LI> <LI ><a title= "An enlarging unordered list" href= "http://www.jluvip.com/works/css/dropmenu/expand.html" >e nlarging unordered list</a> </LI> <li><a title= "an unordered list with link im Ages "href=" http://www.jluvip.com/works/css/dropmenu/enlarge.html ">link images</a> </l i> <li>non-rectangular </LI> <li><a title= "Jigsaw links" href= "http://www.jluvip.com/works/css/dropmenu/jigsaw.html" >jigsaw links</a> </LI> <li><a title= "Circular links" href= "http://www.jluvip.com/works/css/dropmenu/circles.html" >cir Cular links</a> </LI></UL></TD></TR></TBODY></TABLE><!--[if LTE I E 6]> <! [EndIf]--></li> <li><a href= "http://www.jluvip.com/works/css/mozilla/index.html" >MOZILLA<!--[if IE 7]> <!--></A><!--<! [endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <li& Gt;<a title= "A drop down menu" href= "http://www.jluvip.com/works/css/mozilla/dropdown.html" >drop down menu</a> </LI> <li><a title= "A cascading menu" href= "Http://www.jluv Ip.com/works/css/mozilla/cascade.html ">cascading menu</a> </LI> <li>content: </LI> <li><a title= ": hover applied to A div" href= "http://www.jluvip.com/ Works/css/mozilla/moxbox.html ">mozzie box</a> </LI> <li><a title=" I can Bui LD a Rainbow "href=" http://www.jluvip.com/works/css/mozilla/rainbow.html ">i canBuild a rainbow with transparent borders</a> </LI> <li><a title= "Snooker cue" href= "http://www.jluvip.com/works/css/mozilla/snooker.html" >a snooker cue using border art</a> i> <li><a title= "Target practise href=" http://www.jluvip.com/works/css/mozilla/target. HTML ">target practise</a> </LI> <li><a title= Two Tone" href= "http://www.jluvip.com/works/css/mozilla/splittext.html" >two tone headings</a> </LI> <li><a title= "Shadow text" href= "http://www.jluvip.com/works/css/mozilla/shadow_text.html" ; Shadow text</a> </LI></UL></TD></TR></TBODY></TABLE><!--[if LTE IE 6]> <! [endif]--></li> <LI>EXPLORER<!--[if IE 7]> <!--><!--<! [endif]--> <TABLE> < tbody> <TR> <TD> <UL> <li><a title= "Example One" href= "http://www.jluvip.com/works/css/ie/exampleone.html" >the example for Internet explorer</a> ; </LI> <li>weft fonts </LI> <li><a title= "Vertical align" href= "http://www.jluvip.com/works/css/ie/exampletwo.html" >vertically aligning text</a> </l i></ul></td></tr></tbody></table><!--[If LTE IE 6]> <! [endif]--></li> <li><a href= "http://www.jluvip.com/works/css/opacity/index.html" >opacity <!--[if IE 7]> <!--></A><!--<! [endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <li& Gt;<a title= "colour Wheel" href= "http://www.jluvip.com/works/css/opacity/colours.html" >a colour Wheel using opaque colours</a> </LI> <li><a title= "A menu using Opacity" href= "http://www.jluvip.com/works/css/opacity/picturemenu.html" >a menu using opacity</a> </li> ; <li><a title= "partial opacity" href= "http://www.jluvip.com/works/css/opacity/png.html" >partial opacity</a> </LI> <li><a title= "partial opacity II" href= "http://www". Jluvip.com/works/css/opacity/png2.html ">partial opacity ii</a> </LI> <li><a Class=drop title= "Hover/click with no active/focus borders" href= "Http://www.jluvip.com/works/css/menu/hover_ click.html ">HOVER/CLICK<!--[if IE 7]> <!--></A><!--<! [endif]--> <TABLE> <TBODY> <TR> <TD> <ul class=left> <li><a title= "Styling Forms" href= "http://www.jluvip.com/works/css/menu/form.html" >styled form</a> </LI> <li><a title= "removing Active/focus borders" href= "http://www.jluvip.com/works/css/menu/nodots.html" >removing active/focus bo rders</a> </LI> <li>hover/click </LI></UL></TD> </TR></TBODY></TABLE><!--[If LTE IE 6]> <! [endif]--></li></ul></td></tr></tbody></table><!--[If LTE IE 6]> < ! [endif]--></li></ul></div></body></ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
http://www.jluvip.com/works/css/dropmenu/dropmenu.html
