Разворачивающееся меню

Детальный поиск по форуму дал результаты
Пока сделала это меню с ограниченным доступом на основном форуме и в открытом на тестовом - http://testff.forumei.net/
Выводит списки 2ого уровня при наведении курсора.

Коды.
В виджет помещаем (ссылки и названия меняем):

Код:

<style media="all" type="text/css">@import "/menu/menu_style.css";</style><div      class="menu">
    <ul>

    <li><a href="http://freeform.forumei.com/f3-forum" >Гостиная ФФ-Форума</a>
    <ul>
    <li><a href="http://freeform.forumei.com/t7-topic">Клер. О фф и не только</a></li>
    <li><a href="http://freeform.forumei.com/t21-topic">С днём рождения!</a></li>
   
    </ul>
    </li>

<br>
    <li><a href="http://freeform.forumei.com/f6-forum" >Каминный зал</a>
    <ul>
    <li><a href="http://freeform.forumei.com/t26-topic">Вяжем ФФ - ква!</a></li>
   
    </ul>
    </li>

<br>
    <li><a href="http://freeform.forumei.com/f7-forum" >Библиотека</a>
    <ul>
    <li><a href="http://freeform.forumei.com/f11-forum">Обзоры журналов</a></li>
    <li><a href="http://freeform.forumei.com/t29-topic">Идеи отовсюду</a></li>
   
    </ul>
    </li>

<br>
    <li><a href="http://freeform.forumei.com/f4-forum" >Кладовочка</a>
    <ul>
    <li><a href="http://freeform.forumei.com/t25-topic">Картинки, анимации</a></li>
   
    </ul>
    </li>

<br>
    <li><a href="http://freeform.forumei.com/f9-forum" >Кабинет Админа</a>
    <ul>
    <li><a href="http://freeform.forumei.com/t28-topic">Путеводитель по форуму</a></li>
    <li><a href="http://freeform.forumei.com/t31-topic">Поиск по форуму</a></li>
    <li><a href="http://freeform.forumei.com/t10-topic">Проблемы с регистрацией</a></li>

<li><a href="http://freeform.forumei.com/t5-topic">Тестовая</a></li>

    </ul>
    </li>

<br>
    <li><a href="http://freeform.forumei.com/f5-forum" >Создаём форум</a>
    <ul>
    <li><a href="http://freeform.forumei.com/t3-topic">Советуемся</a></li>
    <li><a href="http://freeform.forumei.com/t27-topic">Идея</a></li>
    <li><a href="http://freeform.forumei.com/t20-topic">Инструкции</a></li>
    <li><a href="http://freeform.forumei.com/t19-topic">Оформление форума</a></li>
    </ul>
    </li>


    </ul>
    </div>

В css (какие цвета за что отвечают поясню при необходимости):

Код:

  .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:5px 20px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    }
    .menu ul{
    background:#D8F0DC;
    height:152px;
    list-style:square outside url("/images/blueball.gif");
    margin:0;
    padding:0;
    }
    .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:#D8F0DC url("images/seperator.gif") bottom right no-repeat;
    color:#014206;
    display:block;
    font-weight:normal;
    line-height:25px;
    margin:0px;
    padding:0px 5px;
    text-align:center;
    text-decoration:none:
    }
    .menu li a:hover, .menu ul li:hover a{
    background: #D8F0DC url("images/hover.gif") bottom center no-repeat;
    color:#548910;
    text-decoration:none;
    }
    .menu li ul{

/*для скругления углов в выпадающем списке*/
border-radius: 10px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

    background:#AFF0B3;
    display:none;
    height:auto;
    padding:0px;
    margin:0px 10px 0px 15px;
    border:1px solid #078D28;
    position:absolute;
    width:160px;
    z-index: 999;
    /*top:1em;
    /*left:0;*/
    }
    .menu li:hover ul{
    display:block;

    }
    .menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:160px;
    }
    .menu li:hover li a{
    background:none;

    }
    .menu li ul a{
    display:block;
    height:21px;
    font-size:11px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 5px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{

border-radius: 10px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

    background:#F6F4D0 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#548910;
    text-decoration:none;
    }
    .menu p{
    clear:left;
    }



Одна проблема: если длина названия у пункта 1ого уровня слишком короткая, то следующий пункт "наезжает" сбоку. br не помогает...

Не успела оттестировать в опрее и эксплорере.

Остался вопрос: можно ли впихнуть это меню в верх (под шапку) на ББ-3?.. Насколько я понимаю, пункты верхнего меню убрать можно (хотя бы даже прозрачные картинки вставить), но поле-то под них останется...