Dotted Line Html Span

Question

I have a menu coded in html here, but i need a dotted line to span between the Names and Prices, How would i go about doing that here? I'm kinda lost haha.

You can see it here.

http://mystycs.com/menu/menuiframe.htm

I know i can use css to do it, but how would i get to it span between those two.

Thanks =)

Answer 1

<style type="text/css">
 .menugroup{
    width:100%;
 }    


 .itemlist{
        list-style-type: none;
 }

 .seperator{
        margin: 5px; 
        width:50%; 
        border-bottom: 1px dotted #000
 }

</style>


<div class="menugroup">

   <ul class="itemlist">
      <li>item name<span class="seperator"></span>price</li>
   </ul>

</div>