Sun, 2009-11-08 11:38
Hi
I've just created acool topmenu with a css mnucreator program, but when I try to view it in my editor, only the last button is visible, and nothing is visible in my browser.
The page in question is http://www.surftweeter.com/test.html
Here is the css code:
/* -- Horizontal Text NavBar -- */ .ExtraNav { font-family: Arial, 'Lucida Sans Unicode', 'Lucida Grande', Verdana, sans-serif; } .ExtraNav ul { list-style-type: none; padding: 320px 0px 330px 320px; } .ExtraNav ul li { display: inline; background-color: #009966; text-align: center; padding: 4px 0px 4px 0px; border: 1px solid #8f8fb3; margin:0 0 0 0; } .ExtraNav a:link { color: white; display: inline; padding: 4px 5px 4px 5px; text-decoration: none; } .ExtraNav a:visited { color: purple; padding: 4px 5px 4px 5px; text-decoration: none; } .ExtraNav a:hover { color: #006699; padding: 4px 5px 4px 5px; background-color: #d3e4fb; text-decoration: none; } #Header .ExtraNav { font-size: 100; position: absolute; bottom: -320px; left: -290px; /* this positions the horizontal nav to the left of the content column and above the left navigation links */ } #Header .ExtraNav ul { margin:0; } #Footer .ExtraNav { background-color: #abc4e3; } #Footer .ExtraNav ul { list-style-type: none; padding: 0px 0px 0px 0px; /* this positions the bottom navbar diectly under the pink content wrapper */ } /* ==start of dropdown stuff== */ ul#cssTopMenu ul{display:none} ul#cssTopMenu li:hover>*{display:block} ul#cssTopMenu li:hover{position:relative;} ul#cssTopMenu ul{ position: absolute;left:-1px;top:98%;opacity:0.85;-ms-filter:"progidDXImageTransform.Microsoft.Alpha(Opacity85)";} ul#cssTopMenu ul ul{ position: absolute;left:98%;top:-2px;opacity:1;} ul#cssTopMenu, ul#cssTopMenu ul{ margin:0px;list-style:none;padding:0px;background-color:#009966;border-width:0px;border-style:solid;border-color:#8f8fb3;} ul#cssTopMenu table {border-collapse:collapse} ul#cssTopMenu { display:block;font-size:0;zoom:1;width:98%;height:30px;position:absolute;z-index: 1000;top:320px;right:5px; } ul#cssTopMenu ul{ width:150px;height:30px;padding:0;} ul#cssTopMenu li{ display:block;zoom:1;margin:0;font-size:0;float:left;} ul#cssTopMenu a:active, ul#cssTopMenu a:focus {outline-style:none} ul#cssTopMenu a{ display:block;vertical-align:middle;_display:inline-block;_vertical-align:top;background-color:#009966;border-width:1px;border-style:none;border-color:#8f8fb3;text-align:right;text-decoration:none;padding:5px;_padding-left:0;font:normal 12px Arial;color: #FFFFFF;text-decoration:none;cursor:pointer;} ul#cssTopMenu ul li {float:none;} ul#cssTopMenu ul a{ display:block;text-align:left;white-space:nowrap;} ul#cssTopMenu li:hover>a{ background-color:#d3e4fb;border-color:#8f8fb3;border-style:solid;font:normal 12px Arial;color: #006699;text-decoration:none;} ul#cssTopMenu li a:hover{ _position:relative;background-color:#d3e4fb;border-color:#8f8fb3;border-style:solid;font:normal 12px Arial;color: #006699;text-decoration:none;} ul#cssTopMenu img{ border: none;vertical-align: middle;margin-right:10px;} ul#cssTopMenu img.over{display:none} ul#cssTopMenu li:hover > a img.def {display:none} ul#cssTopMenu li:hover > a img.over {display:inline} ul#cssTopMenu a:hover img.over, ul#cssTopMenu a:hover ul img.def, ul#cssTopMenu a:hover a:hover ul img.def, ul#cssTopMenu a:hover a:hover img.over, ul#cssTopMenu a:hover a:hover a:hover img.over{display:inline} ul#cssTopMenu a:hover img.def, ul#cssTopMenu a:hover ul img.over, ul#cssTopMenu a:hover a:hover ul img.over, ul#cssTopMenu a:hover a:hover img.def, ul#cssTopMenu a:hover a:hover a:hover img.def{display:none} ul#cssTopMenu a:hover ul, ul#cssTopMenu a:hover a:hover ul{display:block} ul#cssTopMenu a:hover ul ul{display:none} ul#cssTopMenu span{ display:block;overflow:visible;background-image:url('arrv_blue_2.gif');background-position: right center;background-repeat: no-repeat;padding-right:17px} ul#cssTopMenu li:hover>a>span{background-image:url('arrv_white_2.gif');} ul#cssTopMenu a:hover span{_background-image:url(arrv_white_2.gif)} ul#cssTopMenu ul span, ul#cssTopMenu a:hover table span{background-image:url('arr_blue_2.gif');padding-right:17px} ul#cssTopMenu ul li:hover > a span{background-image:url('arr_white_2.gif');} ul#cssTopMenu table a:hover span, ul#cssTopMenu table a:hover a:hover span{background-image:url('arr_white_2.gif')} ul#cssTopMenu table span, ul#cssTopMenu a:hover table span{background-image:url('arr_blue_2.gif')} ul#cssTopMenu li a.istylei1{ width:68px;height:18px;} ul#cssTopMenu li a.istylei2{ width:128px;height:18px;} ul#cssTopMenu li a.istylei3{ width:138px;height:18px;} ul#cssTopMenu li a.istylei4{ height:18px;background-color:#3cb485;} ul#cssTopMenu li.istylei4:hover>a{ background-color:#d3e4fb;} ul#cssTopMenu li a.istylei4:hover{ background-color:#d3e4fb;} ul#cssTopMenu li a.istylei5{ width:168px;background-color:#3cb485;} ul#cssTopMenu li.istylei5:hover>a{ background-color:#d3e4fb;} ul#cssTopMenu li a.istylei5:hover{ background-color:#d3e4fb;} [code] and here is the HTML code: [code] <ul id="cssTopMenu"> <li class="istylei1 "><a class=" istylei1 " href="http://deluxe-menu.com/css-menu/">HOME(trial)</a></li> <li class="istylei2 "><a class=" istylei2 " href="#">SURF REPORTS(trial)</a></li> <li class="istylei3 "><a class=" istylei3 " href="#"><span>SURFING FITNESS(trial)</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="istylem0 "> <li class="istylei4 "><a class=" istylei4 " href="#"><span>Introduction(trial)</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="istylei4 "><a class=" istylei4 " href="#">Cardiovascular Fitness(trial)</a></li> <li class="istylei4 "><a class=" istylei4 " href="#">Muscular Endurance(trial)</a></li> <li class="istylei4 "><a class=" istylei4 " href="#">Muscular Strength(trial)</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=""><a class=" " href="http://deluxe-menu.com/css-menu/"><span>STRENGTH TRAINING(trial)</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="istylei5 "><a class=" istylei5 " href="#">Principles of Strength Training(trial)</a></li> <li class="istylei4 "><a class=" istylei4 " href="#">Upper Body Exercises(trial)</a></li> <li class="istylei4 "><a class=" istylei4 " href="#">Lower Body(trial)</a></li> <li class="istylei4 "><a class=" istylei4 " href="#">Core (trial)</a></li> <li class="istylei4 "><a class=" istylei4 " href="#">Integrated Exercises(trial)</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=""><a class=" " href="http://deluxe-menu.com/css-menu/"><span>CARDIO TRAINING(trial)</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="istylei4 "><a class=" istylei4 " href="#">HRM Training(trial)</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=""><a class=" " href="#"><span>FLEXIBILITY(trial)</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class=""><a class=" " href="#">PNF Stretching(trial)</a></li> <li class=""><a class=" " href="#">Yoga(trial)</a></li> <li class=""><a class=" " href="#">SMR(trial)</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="istylei3 "><a class=" istylei3 " href="#">LEARN TO SURF(trial)</a></li> </ul> [code]
