adding main menu span in joomla 2.5 - Joomla! Forum - community, help and support

hey

my name matthew, joomla beginner , stuck archieving span in joomla 2.5 website main navigation

here code in html



<nav>
<ul>
<li class="home"><a href="index.html">home<span></span></a></li>
<li class="about"><a href="html/about.html">about <span></span></a></li>
<li class="services"><a href="html/services.html">services<span></span></a></li>
<li class="distribute"><a href="html/distribution.html">distribution<span></span></a></li>
<li class="photos"><a href="html/photos.html">photos<span></span></a></li>
<li class="videos"><a href="html/videos.html">videos<span></span></a></li>
<li class="faq"><a href="html/faq.html">faq<span></span></a></li>
<li class="contact"><a href="html/contact.html">contact us<span></span></a></li>
</ul>
</nav>


and css is...


#nav {
width:50%;
margin: auto;
height:45%;

background:#ccc;
padding:0 0 10% 0;


}
nav a{
position:relative;

}



nav ul li span{
position:absolute;
right:100%;
top:10%;
width:8%;
height:100%;
background-color:#ffcc66;
background-image:url(../img/navigation-shadow.png);
background-position:right top;
background-repeat:repeat-y;

}
nav ul { list-style: none;
margin: 0 0 5% 0;
position:relative;
}
nav li { margin: 0 0 2% 0;
}
nav li {
background-color: #909673;
overflow:visible;
font-size: 15px;
padding: 11px;
width: 215px;
display: block;
color: white;
position: relative;
left: -40px;

text-indent: 40px;
text-align: justify;
text-decoration:none !important;
}

nav li span {
background-color: #909673;
background-position: top right;
background-repeat; repeat-y;
position: absolute;
right: 100%;
height: 100%;
width: 20px; top: 5px;
}


nav li:nth-child(1) a, nav li:nth-child(1) span { background-color: #ffcc66;}
nav li:nth-child(2) a, nav li:nth-child(2) span { background-color: #ffcc66;}
nav li:nth-child(3) a, nav li:nth-child(3) span { background-color: #ff9933; }
nav li:nth-child(4) a, nav li:nth-child(4) span { background-color: #ff9933; }
nav li:nth-child(5) a, nav li:nth-child(5) span { background-color: #ff6600; }
nav li:nth-child(6) a, nav li:nth-child(6) span { background-color: #ff6600; }
nav li:nth-child(7) a, nav li:nth-child(7) span { background-color: #cc3300; }
nav li:nth-child(8) a, nav li:nth-child(8) span { background-color: #cc3300; }

nav li a:hover {
text-decoration: underline;
background-color: #660000;
}
nav li a:hover span { background-color: #660000;

also check out image preview attached..


am kinda supposed come 3d effect on deadline putting me under pressure.

please .

can clearfy question?

p.s nth-child() css3 property browsers not support it.