Få UL til at ligge sig pænt ved siden af hinanden, Brødkrumme

Nr 2 link ligger sig under den første <UL>, de skal ligge på  linje som en pæn brødkrumme, men synes ikke rigtig det fungerer helt...

HTML:
      <div class="breadcrumb"><ul>
  <li>
    <a class="firstitem" href="/butiksmaster/om_butikken.aspx">Om butikken</a>
    <ul class="M1">
      <li>
        <a class="firstitem" id="activeitem" href="/butiksmaster/om_butikken/om_os.aspx">Om os</a>
      </li>
    </ul>

  </li>
</ul></div>


--------

Mit CSS:

/* BreadCrumb
----------------------------------------*/
.breadcrumb {
    margin-bottom: 30px;
}


.breadcrumb ul {
    padding: 0;
    margin:0;
    list-style-type:none;
}

.breadcrumb ul li {
    padding: 4px 5px 0 20px;
    margin: 0;
    background: transparent url(/files/system/localwebsites/images/arrow.gif) 0px 9px no-repeat;
    text-transform: uppercase;
    float: left;
    display:block;
}

.breadcrumb ul li ul {
    float: left;
    display:inline;
}

.breadcrumb ul li.first {
    background: none;
}