5 Pure DIV+CSS production of pop-up menu (Standard and no JS)

Source: Internet
Author: User
Tags copy relative visibility xmlns
css|js| Standard | Single, most basic: Level Two dropdown pop-up menu


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns=" http://www.w3.org/1999/xhtml "><head><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> level two dropdown pop-up menu--a CROSS BROWSER DROP down cascading validating menu</title>< Style type= "text/css" >/* common styling *//* set up the overall width of the menu Div, the font and the margins */.menu {font-family:arial, sans-serif; width:750px; margin:0; margin:50px 0;} /* Remove the bullets and set the margin and padding to zero for the unordered list */.menu ul {padding:0; margin:0;list-s Tyle-type:none;} /* Float the "list so" the items are in a line and their position relative so this drop down list would appear in th e right place underneath each list item */.menu ul li {float:left; position:relative;} /* Style The links to is 104px wide by 30px high with a and right border 1px solid. SetThe background color and the font size. */.menu ul li A,. Menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:104px; height:30px; Color: #000; border:1px solid #fff border-width:1px 1px 0 0;background: #c9c9a7; line-height:30px; font-size:11px;} * Make the dropdown ul Invisible */.menu ul Li ul display:none;} /* Specific to non IE browsers *//* set the background and foreground color of the main menu Li on hover */.menu ul Li:hov Er a {color: #fff; background: #b3ab79;} * Make the Sub menu UL visible and position it beneath the main Menu list item */.menu UL li:hover ul {display:block; pos Ition:absolute; top:31px; left:0; width:105px;} /* Style The background and foreground color of the submenu links */.menu ul Li:hover ul Li a {display:block; background:# FAEEC7; Color: #000;} /* Style The background and forground colors of the links on Hover */.menu ul Li:hover ul li a:hover {background: #dfc184; Color: #000;} </style><!--[If LTE IE 6]><style type="Text/css" >/* styling specific to Internet Explorer IE5.5 and IE6. Yet to = if IE7 handles Li:hover *//* get rids of any default table style */table {border-collapse:collapse;margin:0; pad ding:0;} /* Ignore the link used by ' Other browsers ' */.menu ul Li A.hide,. Menu ul li a:visited.hide {display:none;} /* Set the background and foreground color of the main menu link on hover */.menu ul li a:hover {color: #fff; background: #b 3ab79;} /* Make the Sub menu UL visible and position it beneath the main Menu list item */.menu ul Li A:hover ul {display:block p Osition:absolute; top:32px; left:0; width:105px;} /* Style The background and foreground color of the submenu links */.menu ul Li A:hover ul li a {background: #faeec7; color : #000;} /* Style The background and forground colors of the links on hover */.menu ul Li A:hover ul li a:hover {background: #dfc184 ; Color: #000;} </style><! [Endif]--></head><body><div class= ' menu ' ><ul><li><a class= ' hide ' href= '../menu/index.html ">DEMOS</a><!--[if LTE IE 6]><a href=". /menu/index.html ">demos<table><tr><td><! [endif]--> <ul> <li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar Ads page ">zero dollars</a></li> <li><a". ./menu/embed.html "title=" wrapping text around images ">wrapping text</a></li> <li><a". /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 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</a></li> <li><a HR Ef= ". /menu/bodies.html "title=" fun with background images ">fun backgrounds</a></li> <li><a href= ". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li> <li><a". /menu/em_images.html "title=" em size images compared ">em sized images</a></li> </ul><!--[If LT E IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= "index.html" >MENUS</a><!--[if LTE IE 6]> <a href= "index.html" >menus<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li> <LI><a href= "cross.html" title= "Non-rectangular 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 links</a></li> </ul><!--[if LTE IE 6]></td></tr& gt;</table></a><! [Endif]--></li><li><a class= "Hide" href= ". /layouts/index.html ">LAYOUTS</a><!--[if LTE IE 6]><a href=". /layouts/index.html ">layouts<table><tr><td><! [endif]--> <ul> <li><a href= ". /layouts/bodyfix.html "title=" Cross browser fixed layout ">fixed 1</a></li> <li><a href=". /layouts/body2.html "title=" Cross browser fixed layout ">fixed 2</a></li> <li><a href=". /layouts/body4.html "title=" Cross browser fixed layout ">fixed 3</a></li> <li><a href=". /layoutS/body5.html "title=" Cross browser fixed layout ">fixed 4</a></li> <li><a href=". /layouts/minimum.html "title=" A Simple minimum width layout ">minimum width</a></li> </ul><!-- [If LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /boxes/index.html ">BOXES</a><!--[if LTE IE 6]><a href=". /boxes/index.html ">boxes<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li> <li> <a href= "CrosS.html "title=" Non-rectangular 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 links</a></li> </ul><!--[if LTE IE 6]></td></tr></table>< /a><! [Endif]--></li><li><a class= "Hide" href= ". /mozilla/index.html ">MOZILLA</a><!--[if LTE IE 6]><a href=". /mozilla/index.html ">mozilla<table><tr><td><! [endif]--> <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> <li><a href=". /mozilla/rainbow.html "title=" I can build a Rainbow ">rainbow box</a></li> <li><a". /mozilla/snooker.html "title=" snooker cue ">snooker cue</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><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /ie/index.html ">EXPLORER</a><!--[if LTE IE 6]><a href=". /ie/index.html ">explorer<table><tr><td><! [endif]--> <ul> <li><a href= ". /ie/exampleone.html "title=" Example onE ">example one</a></li> <li><a href=". /ie/weft.html "title=" weft fonts ">weft fonts</a></li> <li><a". /ie/exampletwo.html "title=" Vertical align ">vertical align</a></li> </ul><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /opacity/index.html ">OPACITY</a><!--[if LTE IE 6]><a href=". /opacity/index.html ">opacity<table><tr><td><! [endif]--> <ul> <li><a href= ". /opacity/colours.html "title=" colour Wheel ">opaque colours</a></li> <li><a". /opacity/picturemenu.html the "title=" a menu using opacity ">opaque menu</a></li> <li><a href=". /opacity/png.html "title=" partial opacity ">partial opacity</a></li> <li><a". /opacity/png2.html "title=" partial opacity II ">partial OpaciTy ii</a></li> </ul><!--[if LTE IE 6]></td></tr></table></a><! [endif]--></li></ul><!--Clear the floats if required--><div class= "clear" > </div ></div></body></html>


Run code Copy code save Code Collection This page


Tertiary dropdown pop-up menu


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns=" http://www.w3.org/1999/xhtml "><head><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> level three dropdown pop-up menu </title><style type=" text/css ">/* common styling {font-family:arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}. Menu ul li A,. Menu ul li a:visited {display:block; text-decoration:none; color: #000; width:104px; height:20px; Text-align: Center Color: #fff; border:1px solid #fff; Background: #710069; line-height:20px; font-size:11px; Overflow:hidden}. Menu ul {padding:0; margin:0;list-style-type:none;}. Menu ul li {float:left; margin-right:1px; position:relative;}. Menu ul Li ul {display:none;} /* Specific to non IE browsers */.menu ul li:hover a {color: #fff; background: #36f;}. Menu UL Li:hover ul {display:block; position:absolute; top:21px; left:0; WIDTH:105PX}. Menu UL Li:hover ul li a.hide {background: #6a3; color: #fff;}. Menu UL Li:hover ul li:hover a.hide {background: #6fc; color: #000;}. Menu UL Li:hover ul li ul {display:none}. Menu UL Li:hover ul li a {display:block background: #ddd; color: #000;}. Menu UL Li:hover ul li a:hover {background: #6fc; color: #000;}. Menu UL Li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}. Menu UL Li:hover ul li:hover ul.left {left:-105px;} </style><!--[If LTE IE 6]><style type= "text/css" >.menu ul li A.hide,. Menu ul li A:visited.hide {display : none; Menu ul Li A:hover ul li a.hide {display:none}. Menu ul li a:hover {color: #fff; background: #36f;}. Menu ul Li A:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}. Menu ul Li A:hover ul li a.sub {background: #6a3; color: #fff; Menu ul Li A:hover ul li a {display:block; background: #ddd; color: #000;}. Menu ul Li A:hover ul Li a ul {Visibility:hidden}. Menu ul Li A:hover ul li A:hover {bAckground: #6fc; Color: #000; Menu ul Li A:hover ul Li A:hover ul visibility:visible; position:absolute; left:105px; top:0; color: #000; Menu ul Li A:hover ul li A:hover ul.left {left:-105px;} </style><! [Endif]--></head><body><div class= "menu" ><ul><li><a class= "Hide" href= ". /menu/index.html ">DEMOS</a><!--[if LTE IE 6]><a href=". /menu/index.html ">demos<table><tr><td><! [endif]--> <ul> <li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar Ads page ">zero dollars</a></li> <li><a". ./menu/embed.html "title=" wrapping text around images ">wrapping text</a></li> <li><a". /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= "Hide" href= ". /menu/hoveR_click.html "title=" Hover/click with no active/focus borders ">hover/click ></a> <!--[if LTE IE 6]> &L T;a class= "Sub" href= ". /menu/hover_click.html "title=" Hover/click with no Active/focus borders ">hover/click > <table><tr> <td> <! [endif]--> <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 ">active focus</a></li> <li><a H Ref= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l> <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><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</a></li> <li><a href=. /menu/bodies.html "title=" fun with background images ' >fun backgrounds</a></li> <li><a href= '. /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li> <li><a". /menu/em_images.html "title=" em size images compared ">em sized images</a></li> </ul><!--[If LT E IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= "index.html" >MENUS</a><!--[if LTE IE 6]> <a href= "index.html" >menus<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title="An enlarging unordered list" >enlarging list</a></li> <li><a href= "enlarge.html" a title= Rdered 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><!--[if LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /layouts/index.html ">LAYOUTS</a><!--[if LTE IE 6]><a href=". /layouts/index.html ">layouts<table><tr><td><! [endif]--> <ul> <li><a href= ". /layouts/bodyfix.html "title=" Cross browser fixed layout ">fixed 1</a></li> <li><a href=". /layouts/body2.html "title=" Cross browsEr fixed layout ">fixed 2</a></li> <li><a href=". /layouts/body4.html "title=" Cross browser fixed layout ">fixed 3</a></li> <li><a href=". /layouts/body5.html "title=" Cross browser fixed layout ">fixed 4</a></li> <li><a href=". /layouts/minimum.html "title=" A Simple minimum width layout ">minimum width</a></li> </ul><!-- [If LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /boxes/index.html ">BOXES</a><!--[if LTE IE 6]><a href=". /boxes/index.html ">boxes<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "an enlarging Unordered list ">enlarging list</a></li> <li><a href=" enlarge.html "title=" an unordered list with Li NK Images ">link images</a></li> <li><a href=" cross.html "title=" Links "> non-rectangular</a></li> <li><a href= "jigsaw.html" title= "Jigsaw Links" >jigsaw ></li> <li><a href= "circles.html" title= "circular links" >circular links</a></li> t;/ul><!--[If LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /mozilla/index.html ">MOZILLA</a><!--[if LTE IE 6]><a href=". /mozilla/index.html ">mozilla<table><tr><td><! [endif]--> <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 href= ". /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 ">rainbow box</a></li> <li><a". /mozilla/snooker.html "title=" snooker cue ">snooker cue</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><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /ie/index.html ">EXPLORER</A≫<!--[If LTE IE 6]><a href=]. /ie/index.html ">explorer<table><tr><td><! [endif]--> <ul> <li><a href= ". /ie/exampleone.html "title=" Example One ">example one</a></li> <li><a href=". /ie/weft.html "title=" weft fonts ">weft fonts</a></li> <li><a". /ie/exampletwo.html "title=" Vertical align ">vertical align</a></li> </ul><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /opacity/index.html ">OPACITY</a><!--[if LTE IE 6]><a href=". /opacity/index.html ">opacity<table><tr><td><! [endif]--> <ul> <li><a href= ". /opacity/colours.html "title=" colour Wheel ">opaque colours</a></li> <li><a". /opacity/picturemenu.html "title=" a menu using opacity ">opaque menu</a></li> <li><a href= ". /opacity/png.html "title=" partial opacity ">partial opacity</a></li> <li><a". /opacity/png2.html "title=" partial opacity II ">partial opacity ii</a></li> <li><a class=" Hide "Href=". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">< hover/click</a> <!--[if LTE IE 6]> <a class= "sub" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">< Hover/click <table><tr> <td> <! [endif]--> <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 ">active focus</a></li> <li><a H Ref= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u L> <!--[If LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> </ul><!--[if LTE IE 6]></td></tr></table></a><! [endif]--></li></ul></div></body></html>


Run code Copy code save Code Collection This page


Three, flyout-vertical three level pop-up menu


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns=" http://www.w3.org/1999/xhtml "><head><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>flyout-vertical to Level three pop-up menu </title><style type=" text/css ">/* common * *. menu {font-family:arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin : 50px 0;}. Menu ul li A,. Menu ul li a:visited {display:block; text-decoration:none; color: #000; width:104px; height:20px; Text-align: Center Color: #fff; border:1px solid #aaa; Background: #710069; line-height:20px; font-size:11px; Overflow:hidden}. Menu ul {padding:0; margin:0;list-style-type:none;}. Menu ul li {float:left; margin-right:1px; position:relative;}. Menu ul Li ul {display:none;} /* Specific to non IE browsers */.menu ul li:hover a {color: #fff; background: #36f;}. Menu UL Li:hover ul {display:block; position:absolutE top:0; left:105px; WIDTH:105PX}. Menu UL Li:hover ul li a.hide {background: #6a3; color: #fff;}. Menu UL Li:hover ul li:hover a.hide {background: #6fc; color: #000;}. Menu UL Li:hover ul li ul {display:none}. Menu UL Li:hover ul li a {display:block background: #eee; color: #000;}. Menu UL Li:hover ul li a:hover {background: #6fc; color: #000;}. Menu UL Li:hover ul li:hover ul {display:block; position:absolute left:105px; top:0;} </style><!--[If LTE IE 6]><style type= "text/css" >.menu ul li A.hide,. Menu ul li A:visited.hide {display : none; Menu ul Li A:hover ul li a.hide {display:none}. Menu ul li a:hover {color: #fff; background: #36f;}. Menu ul Li A:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}. Menu ul Li A:hover ul li a.sub {background: #6a3; color: #fff; Menu ul Li A:hover ul li a {display:block; background: #eee; color: #000;}. Menu ul Li A:hover ul Li a ul {Visibility:hidden}. Menu ul Li A:hover ul li a:hover {background: #6fc; color: #000; Menu UL Li A:hover ul Li A:hover ul {visibility:visible; position:absolute left:105px; top:0; color: #000;} </style><! [Endif]--></head><body><div class= ' menu ' > <ul> <li><a class= ' hide ' href= '. /menu/index.html ">DEMOS</a> <!--[if LTE IE 6]> <a href=". /menu/index.html ">demos <table><tr><td> <! [endif]--> <ul> <li><a href= ". /menu/zero_dollars.html "Title=" "The Zero Dollar Ads page" >zero dollars</a></li> <li><a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text</a></li> <li><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= "Hide" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click ></a>;! --[if LTE IE 6]> <a class= "sub" href= ". /menu/hover_click.html "title=" Hover/click with no Active/focus borders ">hover/click > <table><tr> <td> <! [endif]--> <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 ">active focus</a></li> <li><a href=" .. /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </ul > <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><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</a></li> <li><a Href= ". /menu/bodies.html "title=" Fun with BACkground Images ">fun backgrounds</a></li> <li><a href=". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li> <li><a". /menu/em_images.html "title=" em size images compared ">em sized images</a></li> </ul> <!--[if LT E IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><a class= "Hide" href= "index.html" >MENUS</a> <!--[if LTE IE 6]> <a href= "index.html" >menus <table><tr><td> <! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a></li > <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlarge.html" title= "a unordered list with link imageS ">link images</a></li> <li><a href=" cross.html "title=" Non-rectangular Links "> non-rectangular</a></li> <li><a href= "jigsaw.html" title= "Jigsaw Links" >jigsaw ></li> <li><a href= "circles.html" title= "Circular links" >circular </ul> <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><a class= "Hide" href= ". /layouts/index.html ">LAYOUTS</a> <!--[if LTE IE 6]> <a href=". /layouts/index.html ">layouts <table><tr><td> <! [endif]--> <ul> <li><a href= ". /layouts/bodyfix.html "title=" Cross browser fixed layout ">fixed 1</a></li> <li><a href=". /layouts/body2.html "title=" Cross browser fixed layout ">fixed 2</a></li> <li><a href=". /layouts/body4.html "title=" Cross browser fixed layout ">fixed 3</A></li> <li><a href= ". /layouts/body5.html "title=" Cross browser fixed layout ">fixed 4</a></li> <li><a href=". /layouts/minimum.html "title=" A Simple minimum width layout ">minimum width</a></li> </ul> <!-- [If LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><a class= "Hide" href= ". /boxes/index.html ">BOXES</a> <!--[if LTE IE 6]> <a href=". /boxes/index.html ">boxes <table><tr><td> <! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a></li > <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li> <li><a href= "cross.html" title= "Non-rectangular 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 links</a></li> </ul> <!--[if LTE IE 6]> </ Td></tr></table> </a> <! [endif]--> </li> <li><a class= "Hide" href= ". /mozilla/index.html ">MOZILLA</a> <!--[if LTE IE 6]> <a href=". /mozilla/index.html ">mozilla <table><tr><td> <! [endif]--> <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 ">rainbow box</a></li> <li><a". /mozilla/snooker.html "title=" snooker cue ">snooker cue</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> <!--[if LTE IE 6] > </td></tr></table> </a> <! [endif]--> </li> <li><a class= "Hide" href= ". /ie/index.html ">EXPLORER</a> <!--[if LTE IE 6]> <a href=". /ie/index.html ">explorer <table><tr><td> <! [endif]--> <ul> <li><a href= ". /ie/exampleone. html "title=" Example One ">example one</a></li> <li><a href=". /ie/weft.html "title=" weft fonts ">weft fonts</a></li> <li><a". /ie/exampletwo.html "title=" Vertical align ">vertical align</a></li> </ul> <!--[if LTE IE 6] > </td></tr></table> </a> <! [endif]--> </li> <li><a class= "Hide" href= ". /opacity/index.html ">OPACITY</a> <!--[if LTE IE 6]> <a href=". /opacity/index.html ">opacity <table><tr><td> <! [endif]--> <ul> <li><a href= ". /opacity/colours.html "title=" colour Wheel ">opaque colours</a></li> <li><a". /opacity/picturemenu.html the "title=" a menu using opacity ">opaque menu</a></li> <li><a href=". /opacity/png.html "title=" partial opacity ">partial opacity</a></li> <li><a". /opacity/png2.html "title=" partial opacity II ">pArtial opacity ii</a></li> </ul> <!--[if LTE IE 6]> </td></tr></table> </a > <! [endif]--> </li> </ul></div></body></html>


Run code Copy code save Code Collection This page


Four, dropline-horizontal three horizontal pop-up menu

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns=" http://www.w3.org/1999/xhtml "><head><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>dropline-horizontal three horizontal pop-up menu </title><style type=" text/css ">/* common * * * . menu {font-family:arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin : 50px 0; Background: #fff; Position:relative}. Menu ul {padding:0; margin:0; list-style-type:none;}. Menu ul li {float:left; border-left:1px solid #eee; width:106px;} Menu ul li A,. Menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; Color: #000; Background: #c9c9a7 URL (.. /.. /graphics/drop.gif) bottom right no-repeat; Menu ul Li ul {display:none;} /* Specific to non IE browsers */.menu ul li:hover a {color: #fff; background: #b3ab79;}. Menu ul LI:hover ul {display:block; position:absolute width:749px; top:30px; left:0; background: #b3ab79; color: #fff;} Menu ul Li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}. Menu ul Li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}. Menu UL Li:hover ul li a.hide {background: #bd8d5e URL (... /.. /graphics/drop2.gif) bottom right no-repeat; Color: #fff; Menu UL Li:hover ul li:hover a.hide {background: #b3ab79; color: #fff;}. Menu UL Li:hover ul li ul {display:none}. Menu UL Li:hover ul li a {display:block; background:# #b3ab79; color: #fff; Menu UL Li:hover ul li a:hover {background: #dfc184; color: #000;}. Menu UL Li:hover ul li:hover ul Display:block; position:absolute left:0; top:30px; color: #000; background: #dfc184;}. Menu ul Li:hover ul.right li {float:right;}. Menu UL Li:hover ul li:hover a.hide {background: #dfc184; color: #000;}. Menu UL li:hover ul Li:hover ul li a {background: #dfc184; color: #000;}. Menu UL li:hover ul li:hover ul li A:hover {bAckground: #bd8d5e; Color: #fff;} </style><!--[If LTE IE 6]><style type= "Text/css" >table {border-collapse:collapse; margin:0; padding : 0;}. Menu ul li A.hide,. Menu ul li a:visited.hide {display:none}. Menu ul Li A:hover ul li a.hide {display:none}. Menu ul li A,. Menu ul li a:visited {background: #c9c9a7 URL (... /.. /graphics/drop.gif) 20px right no-repeat; Menu ul li a:hover {color: #fff; background: #b3ab79;}. Menu ul Li A:hover ul {display:block; position:absolute width:749px; top:30px; left:0; background: #b3ab79; color: #fff;}. Menu ul li A:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}. Menu ul li A:hover ul.left_side li {float:left;}. Menu ul Li A:hover ul li a.sub {background: #bd8d5e URL (... /.. /graphics/drop2.gif) 20px right no-repeat; Color: #fff; Menu ul Li A:hover ul li a {display:block; background: #b3ab79; color: #fff;}. Menu ul Li A:hover ul Li a ul {Visibility:hidden}. Menu ul Li A:hover ul li a:hover {background: #dfc184; color: #000; Menu ul Li A:hoverUL Li A:hover ul visibility:visible; position:absolute left:0; top:30px; color: #000; background: #dfc184;}. Menu ul Li A:hover ul Li A:hover ul li a {background: #dfc184; color: #000; Menu ul Li A:hover ul Li A:hover ul li a:hover {background: #bd8d5e; color: #fff;} </style><! [Endif]--></head><body><div class= "menu" ><ul><li><a class= "Hide" href= ". /menu/index.html ">DEMOS</a><!--[if LTE IE 6]><a href=". /menu/index.html ">demos<table><tr><td><! [endif]--> <ul> <li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar Ads page ">zero dollars</a></li> <li><a". ./menu/embed.html "title=" wrapping text around images ">wrapping text</a></li> <li><a". /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= "Hide" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">HOVER/CLICK</a> <!--[if LTE IE 6]& Gt <a class= "Sub" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click <table><tr>< Td> <! [endif]--> <ul class= "Right_side" > <li><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 H Ref= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l> <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><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</a></li> </ul><!- -[if LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= "index.html" >MENUS</a><!--[if LTE IE 6]> <a href= "index.html" >menus<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li> <li> <a href= "cross.html" title= "Non-rectangular links" >non-rectangular</a></li> <li><a href= "jigsaw.html" title= "Jigsaw links" >jigsaw links</a></li> T;<a href= "circles.html" title= "circular links" >circular links</a></li> </ul><!--[if LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /layouts/index.html ">LAYOUTS</a><!--[if LTE IE 6]><a href=". /layouts/index.html ">layouts<table><tr><td><! [endif]--> <ul> <li><a href= ". /layouts/bodyfix.html "title=" Cross browser fixed layout ">fixed 1</a></li> <li><a href=". /layouts/body2.html "title=" Cross browser fixed layout ">fixed 2</a></li> <li><a href=". /layouts/body4.html "title=" Cross browser fixed layout ">fixed 3</a></li> <li><a href=". /layouts/body5.html "title=" Cross browser fixed layout ">fixed 4</a></li> <li><a href= ". /layouts/minimum.html "title=" A Simple minimum width layout ">minimum width</a></li> </ul><!-- [If LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /boxes/index.html ">BOXES</a><!--[if LTE IE 6]><a href=". /boxes/index.html ">boxes<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li> <li> <a href= "cross.html" title= "Non-rectangular 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 links</a></li> </ul><!--[if LTE IE 6]></ td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /mozilla/index.html ">MOZILLA</a><!--[if LTE IE 6]><a href=". /mozilla/index.html ">mozilla<table><tr><td><! [endif]--> <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 ">rainbow box</a></li> <li><a". /mozilla/snooker.html "title=" snooker cue ">snooker cue</a></li> <li><a". /mozilla/target.html "title=" target practise ">target practise</a></li> </ul><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /ie/index.html ">EXPLORER</a><!--[if LTE IE 6]><a href=". /ie/index.html ">explorer<table><tr><td><! [endif]--> <ul class= "Right_side" > <li><a href= ". /ie/exampleone.html "title=" Example One ">example one</a></li> <li><a href=". /ie/weft.html "title=" weft fonts ">weft fonts</a></li> <li><a". /ie/exampletwo.html "title=" Vertical align ">vertical align</a></li> </ul><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /opacity/index.html ">OPACITY</a><!--[if LTE IE 6]><a href=". /opacity/index.html ">opacity<table><tr><td><! [endif]--> <ul class= "Right_side" > <li><a href= ". /opacity/colours.html "title=" colour Wheel ">opaque colours</a></li> <li><a". /opacity/picturemenu.html the "title=" a menu using opacity ">opaque menu</a></li> <li><a href=". /opacity/png.html "title=" partial opacity ">partial opacity</a></li> <li><a". /opacity/png2.html "title=" partial opacity II ">partial opacity ii</a></li> <li><a class=" Hide "Href=". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">HOVER/CLICK</a> <!--[if LTE IE 6]& Gt <a class= "Sub" href= ". /menu/hover_click.html "title=" Hover/click with no ACTIVe/focus borders ">hover/click <table><tr><td> <! [endif]--> <ul class= "Left_side" > <li><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 H Ref= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l> <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> </ul><!--[if LTE IE 6]></td></tr></table></a><! [endif]--></li></ul></div></body></html>


Run code Copy code save Code Collection This page


Five, upmenu-horizontal vertical bounce up level three pop-up menu





<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns=" http://www.w3.org/1999/xhtml "><head><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>upmenu-horizontal vertical bounce up level three pop-up menu </title><style type=" text/css ">/* common/styling * * . menu {font-family:verdana, arial, Sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto; Menu ul li A,. Menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color: #000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; Background: #c9c9a7; line-height:25px; FONT-SIZE:11PX}. Menu ul {padding:0; margin:0;list-style-type:none;}. Menu ul li {float:left; position:relative;}. Menu ul Li ul {display:none;} /* Specific to non IE browsers */.menu ul li:hover a {color: #000; background: #e9e9c7;}. Menu UL Li:hover ul {display:block; position:absolute; bottom: 26px; left:0}. Menu UL Li:hover ul li a.hide {background: #a7c9c9; color: #000;}. Menu UL Li:hover ul li {display:block; background: #fff; color: #000; width:199px; clear:both; Menu UL Li:hover ul li:hover a.hide {background: #dfc184; color: #000;}. Menu UL Li:hover ul li ul {display:none}. Menu UL Li:hover ul li a {display:block; background: #c9a7c9; color: #000; width:100%; padding-left:10px; Menu UL Li:hover ul li a:hover {background: #dfc184; color: #000;}. Menu UL Li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}. Menu UL li:hover ul Li:hover ul li a {background: #dfc184; color: #000;}. Menu UL li:hover ul li:hover ul li a:hover {background: #c9c9a7; color: #000;}. Menu ul li:hover ul.left {left:-105px;}. Menu UL Li:hover ul li:hover ul.left {left:-210px; width:209px;} </style><!--[If LTE IE 6]><style type= "Text/css" >table {border-collapse:collapse; margin:0; padding : 0;}. Menu ul li A.hide,. Menu ul li a:visited.hide {display:none}. Menu ul Li A:hover UL li A.hide {display:none}. Menu ul li a:hover {color: #000; background: #e9e9c7;}. Menu ul Li A:hover ul {display:block; position:absolute; bottom:26px; left:0;}. Menu ul Li A:hover ul li {display:block; background: #fff; color: #000; width:199px;} Menu ul Li A:hover ul li a.sub {background: #a7c9c9; color: #000; Menu ul Li A:hover ul li a {display:block; background: #c9a7c9; color: #000; width:100%; padding-left:10px; Menu ul Li A:hover ul Li a ul {Visibility:hidden}. Menu ul Li A:hover ul li a:hover {background: #dfc184; color: #000; Menu ul Li A:hover ul Li A:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}. Menu ul Li A:hover ul Li A:hover ul li a {background: #dfc184; color: #000; Menu ul Li A:hover ul Li A:hover ul li a:hover {background: #c9c9a7; color: #000; Menu ul li a:hover ul.left {left:-105px}. Menu ul Li A:hover ul li A:hover ul.left {left:-210px;} </style><! [Endif]--></head><body><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p>  </p><p> </p><p> </p><div class= "Menu" ><ul><li><a Class= "Hide" href= ". /menu/index.html ">DEMOS</a><!--[if LTE IE 6]><a href=". /menu/index.html ">demos<table><tr><td><! [endif]--> <ul> <li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar Ads page ">zero dollars</a></li> <li><a". ./menu/embed.html "title=" wrapping text around images ">wrapping text</a></li> <li><a". /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= "Hide" href= ". /menu/hover_click.html "title=" Hover/click with no Active/focus borders ">hover/click ></a> <!--[if LTE IE 6]> <a class= "sub" href= ". /menu/hover_click.html "title=" Hover/click with no Active/focus borders ">hover/click > <table><tr> <td> <! [endif]--> <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 ">active focus</a></li> <li><a H Ref= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l> <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><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</A></LI&GT <li><a href= ". /menu/bodies.html "title=" fun with background images ' >fun backgrounds</a></li> <li><a href= '. /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li> <li><a". /menu/em_images.html "title=" em size images compared ">em sized images</a></li> </ul><!--[If LT E IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= "index.html" >MENUS</a><!--[if LTE IE 6]> <a href= "index.html" >menus<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ≫<a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li> <li>& Lt;a href= "cross.html" title= "Non-rectangular 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 links</a></li> </ul><!--[if LTE IE 6]></td></tr>< /table></a><! [Endif]--></li><li><a class= "Hide" href= ". /layouts/index.html ">LAYOUTS</a><!--[if LTE IE 6]><a href=". /layouts/index.html ">layouts<table><tr><td><! [endif]--> <ul> <li><a href= ". /layouts/bodyfix.html "title=" Cross browser fixed layout ">fixed 1</a></li> <li><a href=". /layouts/body2.html "title=" Cross browser fixed layout ">fixed 2</a></li> <li><a href=". /laYouts/body4.html "title=" Cross browser fixed layout ">fixed 3</a></li> <li><a href=". /layouts/body5.html "title=" Cross browser fixed layout ">fixed 4</a></li> <li><a href=". /layouts/minimum.html "title=" A Simple minimum width layout ">minimum width</a></li> </ul><!-- [If LTE IE 6]></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /boxes/index.html ">BOXES</a><!--[if LTE IE 6]><a href=". /boxes/index.html ">boxes<table><tr><td><! [endif]--> <ul> <li><a href= "spies.html" title= "a coded list of spies" >spies menu</a>< /li> <li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical <li><a href= "expand.html" title= "An enlarging unordered list" >enlarging list</a></li> <li ><a href= "enlArge.html "title=" a unordered list with link images ">link images</a></li> <li><a href=" Cross.h Tml "title=" Non-rectangular 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 links</a></li> </ul><!--[if LTE IE 6]></td></tr></table></a ><! [Endif]--></li><li><a class= "Hide" href= ". /mozilla/index.html ">MOZILLA</a><!--[if LTE IE 6]><a href=". /mozilla/index.html ">mozilla<table><tr><td><! [endif]--> <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 ">rainbow box</a></li> <li><a". /mozilla/snooker.html "title=" snooker cue ">snooker cue</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><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /ie/index.html ">EXPLORER</a><!--[if LTE IE 6]><a href=". /ie/index.html ">explorer<table> <tr><td><! [endif]--> <ul> <li><a href= ". /ie/exampleone.html "title=" Example One ">example one</a></li> <li><a href=". /ie/weft.html "title=" weft fonts ">weft fonts</a></li> <li><a". /ie/exampletwo.html "title=" Vertical align ">vertical align</a></li> </ul><!--[if LTE IE 6] ></td></tr></table></a><! [Endif]--></li><li><a class= "Hide" href= ". /opacity/index.html ">OPACITY</a><!--[if LTE IE 6]><a href=". /opacity/index.html ">opacity<table><tr><td><! [endif]--> <ul class= "left" > <li><a class= "Hide" href=. /menu/hover_click.html "title=" Hover/click with no active/focus borders ">< hover/click</a> <!--[if LTE IE 6]> <a class= "sub" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">< Hover/click <tabLe><tr><td> <! [endif]--> <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 ">active focus</a></li> <li><a H Ref= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click</a></li> </u l> <!--[if LTE IE 6]> </td></tr></table> </a> <! [endif]--> </li> <li><a href= ". /opacity/colours.html "title=" colour Wheel ">opaque colours</a></li> <li><a". /opacity/picturemenu.html the "title=" a menu using opacity ">opaque menu</a></li> <li><a href=". /opacity/png.html "title=" partial opacity ">partial opacity</a></li> <li><a". /opacity/png2.html "title=" partial OPACity II ">partial opacity ii</a></li> </ul><!--[if LTE IE 6]></td></tr></ table></a><! [endif]--></li></ul></div></body></html>


Run code Copy code save Code Collection This page





Related Article

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.