Tip: you can modify some code before running
<!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>Js website navigation drop-down menu code</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-style-type: none ;} /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */. menu ul li {float: left; position: relative;}/* style the links to be written px wide by 30px high with a top and right border 1px solid white. set the background color and the font size. */. menu ul li ,. menu ul li a: visited {display: block; text-align: center; text-decoration: none; width: Pixel; 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: hover 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; position: 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 see if IE7 handles li:hover *//* Get rid of any default table style */table {border-collapse:collapse;margin:0; padding: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:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li a:hover ul {display:block; position: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>DEMOS<!--[if lte IE 6]>DEMOS<table><tr><td><![endif]--> <ul> <li>Zero dollars</li> <li>Wrapping text</li> <li>Styled form</li> <li>Active focus</li> <li>Shadow boxing</li> <li>Image map</li> <li>Fun backgrounds</li> <li>Fade scrolling</li> <li>Em sized images</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>MENUS<!--[if lte IE 6]>MENUS<table><tr><td><![endif]--> <ul> <li>Spies menu</li> <li>Vertical menu</li> <li>Enlarging list</li> <li>Link images</li> <li>Non-rectangular</li> <li>Jigsaw links</li> <li>Circular links</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>LAYOUTS<!--[if lte IE 6]>LAYOUTS<table><tr><td><![endif]--> <ul> <li>Fixed 1</li> <li>Fixed 2</li> <li>Fixed 3</li> <li>Fixed 4</li> <li>Minimum width</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>BOXES<!--[if lte IE 6]>BOXES<table><tr><td><![endif]--> <ul> <li>Spies menu</li> <li>Vertical menu</li> <li>Enlarging list</li> <li>Link images</li> <li>Non-rectangular</li> <li>Jigsaw links</li> <li>Circular links</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>MOZILLA<!--[if lte IE 6]>MOZILLA<table><tr><td><![endif]--> <ul> <li>Drop down menu</li> <li>Cascading menu</li> <li>Content:</li> <li>Mozzie box</li> <li>Rainbow box</li> <li>Snooker cue</li> <li>Target practice</li> <li>Two tone headings</li> <li>Shadow text</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>EXPLORER<!--[if lte IE 6]>EXPLORER<table><tr><td><![endif]--> <ul> <li>Example one</li> <li>Weft fonts</li> <li>Vertical align</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>OPACITY<!--[if lte IE 6]>OPACITY<table><tr><td><![endif]--> <ul> <li>Opaque colours</li> <li>Opaque menu</li> <li>Partial opacity</li> <li>Partial opacity II</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!-- clear the floats if required --><div class="clear"> </div></div></body></html>
Tip: you can modify some code before running
