List-style issue in navigation menu

[son.of.the.morning]

I am trying to add a 'list-style' (bullet points) fo a sub menu, the way i have done it is i have gave the sub menu a class and applied some styles to it in my CSS document, but it just doesnt seem to be having non of it.

 

Here is the HTML

<div id="nav">
        <ul id="menu">
              <li><a href="">Articles</a></li>
              <li><a href="">Tutorials</a>
                <ul class="subMenu">
                    <li><a href="">HTML 5.0</a></li>
                    <li><a href="">CSS 3.0</a></li>
                    <li><a href="">JQuery</a></li>
                    <li><a href="">PHP</a></li>
                    <li><a href="">Flash</a></li>
                    <li><a href="">W3C</a></li>
                    <li><a href="">PhotoShop</a></li>
                </ul>
              </li>
              <li><a href="">Freebies</a></li>
              <li><a href="">Join Up</a></li>
            </ul>
        </div>

 

And here is the CSS

ul {
    font-family: Arial;
    font-size: 14px;
    margin-left: 13px;
    padding: 0;	
}
ul li {
  	display: block;
  	position: relative;
  	float: left;
}
/* Hides the sub menu */
li ul {
 display: none; 
}

/*Sub Menu styles*/
.subMenu {
width: 160%;
}

ul li a {
  	display: block;
  	text-decoration: none;
  	color: #89bb36;
  	padding: 5px 15px 5px 15px;
  	margin-left: 1px;
  	white-space: nowrap;
  	background-color: #172322;
}

ul li a:hover { 
}

li:hover ul {
  	display: block;
  	position: absolute;
}

li:hover li {
  	float: none;
  	font-size: 11px;
}

li:hover a { 
}

li:hover li a:hover { 
}

 

If anyone can help me with this ile would be a happy chappy, thanx.

[son.of.the.morning]

Sorted!