Centered menu #1
by artoodetoo
HTML
<div id="menuwrapper"> <div id="menu"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#url">Home</a></li> <li class="level1-li"><a class="level1-a fly" href="#url">Resort</a> <ul class="level2"> <li><a href="#url">Ski Hire Facilities</a></li> <li><a class="fly" href="#url">Main Ski Slopes</a> <ul class="level3"> <li><a href="#url">Beginners Slopes</a></li> <li><a href="#url">Intermediate Slopes</a></li> <li><a class="fly" href="#url">Advanced Skill Levels</a> <ul class="level4"> <li><a href="#url">Local</a></li> <li><a href="#url">Nearby</a></li> <li><a href="#url">With instructor</a></li> <li><a href="#url">Snow boarding</a><b></b></li> </ul> </li> <li><a href="#url">Expert</a></li> </ul> </li> <li><a href="#url">Night Life</a></li> <li><a class="fly" href="#url">Restaurants</a> <ul class="level3"> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a><b></b></li> </ul> </li> <li><a class="fly" href="#url">Car Hire</a> <ul class="level3"> <li><a href="#url">From Airport</a></li> <li><a href="#url">In Resort</a></li> ...CSS
#menu {width:750px; height:531px; background:url(http://pagecuts.ru/tips-n-tricks/images/ski2.jpg); text-align:center;} /*#menu b {position:absolute;}*/ /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/ #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px 0 10px;} #menu ul ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li:hover ul ul ul ul ul { visibility: hidden; } #menu ul li:hover ul, #menu ul ul li:hover ul, #menu ul ul ul li:hover ul, #menu ul ul ul ul li:hover ul, #menu ul ul ul ul ul li:hover ul { visibility: visible; } /*#menu ul ul ul ul ul ul ul {visibility: hidden !important;}*/ #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} #menu ul {display:inline-block;} #menu li {margin:0; padding:0; list-style:none;} #menu li {display:inline-block; display:inline;} #menu ul ul {position:absolute} #menu ul.level1 {margin:0 auto;} #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} #menu ul.level1 {background:#3aa3d3;} #menu ul.level2 {background:#ae4621;} #menu ul.level3 {background:#c98b14;} #menu ul.level4 {background:#9f690e;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu ul li ul {left:0; top:25px;} #menu ul ul li ul {left:100%; top:auto; margin-top:-25px;} #menu li.left ul {left:auto; right:0; top:25px;} #menu li.left ul li ul {left:auto; right:100%; top:auto; margin-top:-25px;} #menu li.left ul a {text-align:right; padding:0 10px 0 20px;} #menu li a.fly {background:transparent url(http://pagecuts.ru/tips-n-tricks/images/arrow.gif) no-repeat right center;} #menu li.left ul a.fly {background:transparent url(http://pagecuts.ru/tips-n-tricks/images/arrow-left.gif) no-repeat left center;}JavaScript
/*
This is a little modified Stuart Nicholls example menu.
See more at http://www.cssplay.co.uk/
*/