Hello all. Perhaps you folks can correct me on what I am doing wrong?
this is what I have in html
HTML Code:
<nav>
<ul>
<li><a href="#">stuff  <span></span> </a></li>
<li><a href="#">about <span></span> </a></li>
<li><a href="#">contact <span></span> </a> </li>
<li><a href="#">more stuff <span></span> </a></li>
</ul>
</nav> <!-- nav -->
this is my css

Code:
nav {
margin:0 0 0 -50px;
text-transform:uppercase;
}
nav ul {list-style: none;}

nav ul li a{
display: block;
padding: 10px 10px 10px 20px;
color: #fff;
font-size:16px;
text-decoration:none;
background-color:#ccc;
margin: 0 0 5px 0 ;
line-height:25px;
position:relative;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
}

nav ul li a span{
position: absolute;
right: 100%;
top: 10px;
width:50px;
height: 100%;
background-color:#ddd;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
border-left:2px solid #666600;
background-image:url(./adminImages/shadowPng.png);
background-position:top right;
background-repeat: repeat-y;
}

nav ul li a span::before{
position: absolute;
right: 100%;
top: 10px;
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span {background-color:#520000;}
nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {background-color:#661400;}
nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {background-color:#000;}
nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {background-color:#333;}
I wanted the ribbon style effect on the span's tails.
thank you
D