Tip: you can modify some code before running
<divclass="demo-container"><br/><br/><style type="text/css"># Nav {margin: 20px0 80px 0} # nav {float: left; width: Pixel; height: auto; background: # fff url (/wp-content/uploads/examples/sliding-doors-with-a-drop-line/bottom_line.gif) repeat-x bottom; position: relative} # nav. select, # nav. current {margin: 0; padding: 0; list-style: none; display: block} # navli {display: inline; margin: 0; padding: 0; height: auto} # nav. select a, # nav. currenta {display: block; height: 21px; float: left; background: url (/wp-content/uploads/examples/sliding-doors-with-a-drop-line/left_blue.gif) no-repeat left top; padding: 00 0 3px; border-bottom: 1px solid #000; text-decoration: none; font-size: 10px; line-height: 20px; white-space: nowrap; margin-left: 2px} * html # nav. select a, * html # nav. currenta {width: 1px} # nav. select a B, # nav. current AB {height: 100%; display: block; background: url (/wp-content/uploads/examples/sliding-doors-with-a-drop-line/right_blue.gif) no-repeat right top; padding: 06px 0 3px; color: #000} # nav. select a: hover, # nav. select li: hovera {background-position: 0-75px; border-color: #046; cursor: pointer} # nav. select a: hover B, # nav. select li: hover AB {background-position: 100%-75px; border-color: #046; color: # fff} # nav. sub {display: none} # navtable {position: absolute; border-collapse: collapse; left: 0; top: 0; font-size: 11px} # nav. currenta {background-position: 0-75px; border-color: #046} # nav. current AB {background-position: 100%-75px; color: # ff6} # nav. sub li a: hover, # nav. select a: hover. sub li a: hover, # nav. select li: hover. sub li a: hover {background: #005984 url (/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat; color: # fff; text-decoration: underline} # nav. sub_active. current_sub a, # nav. sub_active a: hover {background: #005984 url (/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat; color: # ff6; text-decoration: underline} # nav. select li a: hover. sub, # nav. select li: hover. sub {display: block; position: absolute; width: Pixel px; top: 21px; left: 0; background: #005984; margin-top: 1px; padding: 0; z-index: 100; border-bottom: 20px solid # fff} # nav. sub, # nav. sub_active {margin: 0; padding: 0; list-style: none} # nav. sub_active {display: block; position: absolute; width: Pixel px; top: 21px; left: 0; background: #005984; margin-top: 1px; padding: 0; z-index: 10; color: #000; border-bottom: 20px solid # fff} * html # nav. sub_active, * html # nav. select a: hover. sub {z-index:-1; margin-top: 0; margin-top: 1px} # nav. sub_activea {height: 25px; float: left; text-decoration: none; line-height: 24px; white-space: nowrap; font-weight: normal} # nav. sub_active a, # nav. select a: hover. sub li a, # nav. select li: hover. sub lia {display: inline; background: #005984 url (/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat; padding: 010px; margin: 0; font-size: 10px; width: auto; white-space: nowrap; font-weight: normal; border: 0; color: # fff; height: 25px; line-height: 24px}</style><divid="nav"><ulclass="select"><li><ahref="#"><b>January</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Fish</li><li><ahref="#">Chips</li><li><ahref="#">Bacon</li><li><ahref="#">Eggs</li><li><ahref="#">Tomato</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>February</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Sausages</li><li><ahref="#">Fried Bread</li><li><ahref="#">Fillet steak</li><li><ahref="#">Mushrooms</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>March</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Lager</li><li><ahref="#">Beer</li><li><ahref="#">Red wine</li><li><ahref="#">Crips</li><li><ahref="#">Brandy</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>Else L</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Tea</li><li><ahref="#">Coffee</li><li><ahref="#">Milk</li><li><ahref="#">Squash</li><li><ahref="#">Lemonade</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="current"><li><ahref="#"><b>May</b> </li></ul><ulclass="sub_active"><li><ahref="#">Crab</li><li><ahref="#">Shrimps</li><li><ahref="#">Lobster</li><liclass="current_sub"><ahref="#">Prawns</li><li><ahref="#">Salmon</li></ul><ulclass="select"><li><ahref="#"><b>June</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Jam</li><li><ahref="#">Lemon Curd</li><li><ahref="#">Marmalade</li><li><ahref="#">Marmite</li><li><ahref="#">Bovril</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>July</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Lamb</li><li><ahref="#">Chicken</li><li><ahref="#">Pork</li><li><ahref="#">Beef</li><li><ahref="#">Cheese</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>August</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Beach</li><li><ahref="#">Country walk</li><li><ahref="#">Photography</li><li><ahref="#">Window shopping</li><li><ahref="#">Gardening</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>September</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="#">Tulips</li><li><ahref="#">Sunflower</li><li><ahref="#">Cyclamen</li><li><ahref="#">Dahlia</li><li><ahref="#">Gladiolus</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><ulclass="select"><li><ahref="#"><b>October</b> <!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ulclass="sub"><li><ahref="http://www.111cn.net">Good theme</li><li><ahref="#">Saucer</li><li><ahref="#">Plate</li><li><ahref="#">Fruit bowl</li><li><ahref="#">Egg cup</li></ul> <!--[if lte IE 6]></td></tr></table><![endif]--></li></ul></div><brclass="clear" /><br/></div></td> </tr></table>
Tip: you can modify some code before running
