[Solved] span and class inside div id

hi, i am making the website and almost finish doing it...and then i try to validate it in w3c validator, and then i got errors (4 errors) which is in my navigation part.
and the error msg is :

#go here
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
#end at here

so i am sure it is because of my navigation,
because i have div id and then span, and then again class(.nav_special) inside it,
because i wish after the navigation title, i have the description text underneath it.
from the error msg i got,i guess i should not do it in this way, if so, what tag should i use?

if anyone who knows please guide me or let me know what is the problem so that i could continue doing it! thanks!

i put the problem link and the html, css code here:

html code:(deleted the non relevant part)

problem's css

• Test1
  test test test test test test


• Test2
  test test test test test test


• Test3
  test test test test test test


• Test4
  test test test test test test

css code: (deleted non relevant part,#nav span is at line 95 and .nav_special is at line 115)

/* Body
---------------------------------------------------------------------- */
body {
margin: 0;
font-size: 11px;
font-family: Arial;
color: #000066;
background: #ffffff url(../images/common/bg.gif) repeat-y;
}
#wrapper {
width: 720px;
text-align: left;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Links
---------------------------------------------------------------------- */
a {
text-decoration: none;
color: #000066;
}
a img {
border: 0;
}
a:hover {
color: #ff6666;
}

/* Header
---------------------------------------------------------------------- */
#header {
width: 700px;
height: 80px;
padding-left: 10px;
color: #ffffff;
background: url(../images/common/headerbg.jpg) right no-repeat;

}
#header img {
margin-top: 33px;
}

/* Page Body
---------------------------------------------------------------------- */
#pagebody {
width: 700px;
padding-left: 10px;
}
#pagebody:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

/* Navigation
---------------------------------------------------------------------- */
#nav {
margin-top: 10px;
float: left;
padding: 0;
width: 140px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
margin: 0;
padding: 10px 0;
border-bottom: 1px dotted #000066;
font-size: 12px;
font-weight: bold;
}
#nav span, #nav a {
display: block;
line-height: 1.4;
padding: 0 0 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
#nav span {
border-left-color: #ff6666;
color: #ff6666;
}
#nav a {
border-left-color: #000066;
text-decoration: none;
color: #000066;
}
#nav a:hover {
border-left-color: #ff6666;
color: #ff6666;
}
.nav_special {
font-size: 9px;
font-weight: normal;
}

the link to problem is :
http://www.nanaku4design.com/problem/work.html (html)
http://www.nanaku4design.com/problem/css/base.css (css)

thank very much in advance!

***i dunno what happen to my post, it has many blue lines when i mouse over the msg below it!!!!! did i make something strange???? so sorry!***