Вопрос по CSS выпадающее меню (Срочная помощь)

Здравствуйте уважаемые Вебмастера! Нужна помощь!
Дело в том что у меня стоит горизонтальное выпадающее меню, но мне нужно сделать еще выпадающее под меню.
Т.е внутри выпадающего, еще 1 выпадающее под меню.

Обратите внимание, сейчас у меня так:


А нужно вот так:


Уже 3 час парю мозги, но все никак не допру, пожалуйста помогите разобраться, видимо нужно дописать стиль, но я не знаю как.
Мои контакты: ICQ: 50561965
очень надеюсь на вашу помощь

Вот стиль меню:

/* -- [main menu] ------------------ */
#navbar nav {
    position:relative;
    float:left;
    max-width:59%;
    z-index:50;
}
#navbar .main-menu li  {
    position:relative;
}
#navbar .main-menu li a {
    color:#fff;
    background:#333;
}
#navbar .main-menu li:hover a,
#navbar .main-menu li a:hover {
    color:#000;
    background:#fff;
}

/* -- [level 2] */
#navbar .main-menu li ul {
    top:30px;
    left:-1px;
    overflow:hidden;
    width:160px;
    border-style:none solid solid;
    border-width:1px;
    border-color:#666;
}
#navbar .main-menu li li {
    float:none;
    border-bottom:1px dotted #eee;
    white-space:nowrap;
}
#navbar .main-menu li li.last {
    border:none;
}
#navbar .main-menu li li a {
    background:none;
    color:#000;
}
#navbar .main-menu li li a:hover {
    color:#f30;
    text-indent:.5em;
}