Pure CSS Make drop-down navigation menu instance Code

css| Menu | navigation | dropdown

<style type= "Text/css" >.menu {font-family:verdana, sans-serif width:750px; position:relative; 85em;padding-bottom:250px}. Menu ul {padding:0; margin:0;list-style-type:none;}. Menu ul li {float:left;position:relative;}. Menu ul li A,. Menu ul li a:visited {display:block; text-decoration:none; color: #000; width:139px; height:3em; color: #000; border:1px solid #fff; border-width:1px 1px 0 0; Background: #dfc184; padding-left:10px; Line-height:3em;} * HTML. Menu ul li A,. Menu ul li a:visited {width:149px;w\idth:139px}. Menu ul Li ul {display:none;} Table {margin:-1px; border-collapse:collapse;font-size:1em;} /* Specific to non IE browsers */.menu ul li:hover a {color: #fff; background: #bd8d5e;}. Menu UL Li:hover ul {display:block; position:absolute; top:3em;margin-top:1px;left:0; width:150px;}. Menu UL Li:hover ul li ul {display:none}. Menu UL Li:hover ul li a {display:block; background: #faeec7; color: #000; height:auto; line-height:1.2em; padding:5px 10px; Width:129px}.menu uL Li:hover ul Li A.drop {background: #c9c9a7 URL (... /.. /graphics/drop.gif) bottom right no-repeat; Menu UL Li:hover ul li a:hover {background: #c9c9a7; color: #000;}. Menu UL Li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0;width:150px;}. Menu UL Li:hover ul li:hover ul.left {left:-150px;} </style><!--[If LTE IE 6]><style type= "text/css" >.menu ul li a:hover {color: #fff; background: #bd8d5e;}. Menu ul Li A:hover ul display:block; position:absolute; top:3em; Left:0;background: #fff; margin-top:0;marg\in-top:1px; Menu ul Li A:hover ul li a {display:block; background: #dbe4ab; color: #000; height:auto; line-height:1.5em; padding:5px 10p X WIDTH:150PX;W\IDTH:129PX}. Menu ul Li A:hover ul li a.drop {background: #c9c9a7 URL (... /.. /graphics/drop.gif) bottom right no-repeat; Menu ul Li A:hover ul Li a ul {visibility:hidden; position:absolute; height:0; width:0;}. Menu ul Li A:hover ul li a:hover {background: #c9c9a7; color: #000; Menu ul Li A:hover ul li A:hover UL {visibility:visible; position:absolute; top:0; color: #000; left:150px;} Menu ul Li A:hover ul li A:hover ul.left {left:-150px;} </style><! [Endif]--><div class= ' menu ' ><ul><li><a class= ' drop ' href= '. /menu/index.html ">DEMOS<!--[if IE 7]><!--></a><!--<! [endif]--><table><tr><td> <ul> <li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar ads page ">zero dollars advertising page</a></li> Gt;<a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text around images</a></li>-&LT;LI&GT;&L T;a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li> <li><a href=". /menu/nodots.html "title=" removing Active/focus borders ">active focus</a></li> <li><a class= "Drop" href=. /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click with No borders<!--[if IE 7]><!--></a><!--<! [endif]--><table><tr><td> <ul> <li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li> <li><a href=". /menu/nodots.html "title=" removing Active/focus borders ">removing active/focus borders</a></li> <li><a href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l></td></tr></table><!--[If LTE IE 6]></a><! [endif]--> </li> <li class= "Upone" ><a href= ". /menu/shadow_boxing.html "title=" Multi-position drop Shadow ">shadow boxing</a></li> <li><a Href= ". /menu/old_master.html "title=" Image map for detailed information ">image map for detailed information</a></ Li> <li><a href= ". /menu/bodies.html "title=" funWith background images ">fun with background images</a></li> <li><a". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li> <li><a". /menu/em_images.html "title=" em size images compared ">em image sizes Compared</a></li> td></tr></table><!--[If LTE IE 6]></a><! [Endif]--></li><li><a href=]. /boxes/index.html ">BOXES<!--[if IE 7]><!--></a><!--<! [endif]--><table><tr><td> <ul> <li><a href= "spies.html" title= "a coded list of S Pies ">a coded list of spies</a></li> <li><a href=" vertical.html "title=" a horizontal vertical m ENU ">vertical menu</a></li> <li><a href=" expand.html "title=" An enlarging unordered list "> enlarging unordered list</a></li> <li><a href= "enlarge.html" title= "an UnoRdered list with link images ">link images</a></li> <li><a href=" cross.html "title=" Non-rectang Ular links ">non-rectangular</a></li> <li><a href=" jigsaw.html "title=" Jigsaw Links "> Jigsaw links</a></li> <li><a href= "circles.html" title= "Circular links" >circular ></li> </ul></td></tr></table><!--[if LTE IE 6]></a><! [Endif]--></li><li><a href=]. /mozilla/index.html ">MOZILLA<!--[if IE 7]><!--></a><!--<! [endif]--><table><tr><td> <ul> <li><a href= ". /mozilla/dropdown.html "title=" A drop down menu, ">drop down menu</a></li> <li><a href=". /mozilla/cascade.html "title=" A cascading menu ">cascading menu</a></li> <li><a". /mozilla/content.html "title=" Using content: ">content:</a></li> <li><a href= ". /mozilla/moxbox.html "title=": hover applied to a div ">mozzie box</a></li> the <li><a href=". /mozilla/rainbow.html "title=" I can build a Rainbow ">i can builds a rainbow with transparent Borders</a></li&gt ; <li><a href= ". /mozilla/snooker.html "title=" snooker cue ">a snooker cue using border art</a></li> <li><a ".. /mozilla/target.html "title=" target practise ">target practise</a></li> <li><a href=". /mozilla/splittext.html "title=" Two tone headings ">two tone headings</a></li> <li><a". /mozilla/shadow_text.html "title=" shadow text ">shadow text</a></li> </ul></td></tr ></table><!--[If LTE IE 6]></a><! [Endif]--></li><li><a href=]. /ie/index.html ">EXPLORER<!--[if IE 7]><!--></a><!--<! [endif]--><table><tr><td> <ul> <li><a href= ". /ie/exampleone.html "title=" Example One ">the A for Internet Example explorer</a></li> ; a href= ". /ie/weft.html "title=" weft fonts ">weft fonts</a></li> <li><a". /ie/exampletwo.html "title=" Vertical align ">vertically aligning text</a></li> </ul></td> </tr></table><!--[If LTE IE 6]></a><! [Endif]--></li><li><a href=]. /opacity/index.html ">OPACITY<!--[if IE 7]><!--></a><!--<! [endif]--><table><tr><td> <ul> <li><a href= ". /opacity/colours.html "title=" colour Wheel ">a colour wheel using opaque colours</a></li> <li>< A href= ". /opacity/picturemenu.html "title=" a menu using opacity ">a menu using opacity</a></li> <li><a hr Ef= ". /opacity/png.html "title=" partial opacity ">partial opacity</a></li> <li><a href= ". /opacity/png2.html "title=" partial opacity II ">partial opacity ii</a></li> <li><a class=" drop "Href=". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">HOVER/CLICK<!--[if IE 7]><!-- ></a><!--<! [endif]--><table><tr><td> <ul class= "left" > <li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li> <li><a href=". /menu/nodots.html "title=" removing Active/focus borders ">removing active/focus borders</a></li> <li><a href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l></td></tr></table><!--[If LTE IE 6]></a><! [endif]--> </li> </ul></td></tr></table><!--[if LTE IE 6]></a><! [ENDIF]--&GT;&LT;/li></ul></div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]