2 replies [Last post]
surfess
Offline
newbie
Last seen: 12 years 38 weeks ago
Timezone: GMT+8
Joined: 2009-11-08
Posts: 6
Points: 9

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]

surfess
Offline
newbie
Last seen: 12 years 38 weeks ago
Timezone: GMT+8
Joined: 2009-11-08
Posts: 6
Points: 9

oops

Did not finish my post

just wanted to say thanks in advance to anyone that could help me
cheers
Lindy

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Accidental extra thread

So could a mod delete this one pls?

I'm no expert, but I fake one on teh Internets