2 kolumny w CSS - problem z wysokością

[ogor89]

Na tej ostatniej stronie mam same prostokąciki zamiast tekstu. Pokombinuję z tym później, bo mam bardziej naglący problem.

Chcę zrobić drugi poziom menu w którym będzie następowała zmiana koloru <li> na inny po najechaniu i kliknięciu. (class="menuactive"). Poniżej kod i screen z tego co osiągnąłem. <span> ma nadaną szerokość 150px, ale jakoś tego nie widać. Gdzie jest błąd i jak go naprawić?

HTML:

Kod:

<div id="menuwrapper">
<ul id="primary-nav">
  <li>
  <a
href="http://testing.thumpers.pl/cmsms/"><span>strona główna</span></a>
</li>
  <li><a ><span class="sectionheader">motocykle</span></a>
  <ul class="unli">
  <li>
  <a
href="http://testing.thumpers.pl/cmsms/index.php?page=motocykle-honda"><span>honda</span></a>
</li>
  <li>
  <a
href="http://testing.thumpers.pl/cmsms/index.php?page=motocykle-yamaha"><span>Yamaha</span></a>
</li>
  <li>
  <a
href="http://testing.thumpers.pl/cmsms/index.php?page=kawasaki"><span>Kawasaki</span></a>
  </li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>
  </li>
                          <li class="menuactive menuparent parent"><a class="menuactive menuparent parent"><span class="sectionheader">Skutery</span></a>
    <ul class="unli">
            <li class="menuactive"><a class="menuactive"
  href="http://testing.thumpers.pl/cmsms/index.php?page=skut-honda"><span>Honda</span></a>
  </li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>
  </li>
    <li>
  <a
href="http://testing.thumpers.pl/cmsms/index.php?page=o-nas"><span>O nas</span></a>
</li>
  <li>
  <a
href="http://testing.thumpers.pl/cmsms/index.php?page=kontakt"><span>Kontakt</span></a>

</li>
</ul>
<div class="clearb"></div>
</div>

CSS:

Kod:

ul, ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* START LEVEL 0 */
#menuwrapper ul {
    float: left;
    width: 100%;
    height: 24px;
}

#menuwrapper ul li {
    float: left;
    height: 24px;
    margin-right: 3px;
}
#menuwrapper ul li {
    background: url("[[root_url]]/uploads/GoodMoto/main_menu_left.png") no-repeat left top;
}
#menuwrapper ul li:hover {
    background: url("[[root_url]]/uploads/GoodMoto/main_menu_hover_left.png") no-repeat left top;
}
#menuwrapper ul li.menuactive, #menuwrapper ul li.menuactive:hover {
    background: url("[[root_url]]/uploads/GoodMoto/main_menu_active_left.png") no-repeat left top;
}

#menuwrapper ul li a {
    font-size:    14px;
    color: rgb(92,119,86);
    text-decoration: none;
}
#menuwrapper ul.primary-nav li a, #menuwrapper ul.primary-nav li a:visited {
    display: block;
    height:    24px;
}

#menuwrapper ul li a span {
    margin-left:    15px;
}

#menuwrapper ul li a span, #menuwrapper ul li a:visited span {
    height:            24px;
    margin-left:    15px;
    padding:            0 20px 6px 5px;
}
#menuwrapper ul li a span, #menuwrapper ul li a:visited span {
    background:        url("[[root_url]]/uploads/GoodMoto/main_menu_right.png") no-repeat right top;
}
#menuwrapper ul li:hover a span {
    background: url("[[root_url]]/uploads/GoodMoto/main_menu_hover_right.png") no-repeat right top;
}
#menuwrapper ul li.menuactive a span, #menuwrapper ul li.menuactive:hover a span, #menuwrapper ul li.menuactive a:visited span, #menuwrapper ul li.menuactive:hover a:visited span {
    background: url("[[root_url]]/uploads/GoodMoto/main_menu_active_right.png") no-repeat right top;
    color: rgb(25,25,25);
}

#menuwrapper li.separator {
    display:    none;
}
/* END LEVEL 0 */

/* START LEVEL 1 */
/* BACKGROUND RESET */
#menuwrapper ul li ul li, #menuwrapper ul li.menuactive ul li, #menuwrapper ul li:hover ul li, #menuwrapper ul li.menuactive:hover ul li,
#menuwrapper ul li ul li a span, #menuwrapper ul li ul li a:visited span,
#menuwrapper ul li:hover ul li a span, #menuwrapper ul li:hover ul li a:visited span,
#menuwrapper ul li.menuactive ul li a span, #menuwrapper ul li.menuactive ul li a:visited span,
#menuwrapper ul li.menuactive:hover ul li a span, #menuwrapper ul li.menuactive:hover ul li a:visited span {
    background:    none;
}

#menuwrapper ul li ul {
    position:    absolute;
    width:        auto;
    height:        auto;
    margin:            6px 0 0 0;
    padding:            0;
    background-color:    yellow;
}

#menuwrapper ul li ul li, #menuwrapper ul li.menuactive ul li,
#menuwrapper ul li:hover ul li, #menuwrapper ul li.menuactive:hover ul li {
    float:        left;
    clear:        both;
    width:        auto;
    margin:            0;
    padding:            0;
    background-color:    red;
}

#menuwrapper ul li ul li a {
    margin:            0;
    padding:            0;
}

#menuwrapper ul li ul li a span, #menuwrapper ul li ul li a:visited span,#menuwrapper ul li ul li a:hover span {
    margin:            0;
    padding:            0;
    width:            150px;
}