Выпадающее меню CSS не может оставаться после активности при наведении

В настоящее время я работаю над несколькими раскрывающимися меню на следующей странице: http://icao.tungsten.hireserve-test.com/home.html

Первоначально у нас было только одно из этих меню, но наш клиент с тех пор изменил свой шаблон, и теперь нам нужно реализовать два раскрывающихся меню. Раньше это делалось с событиями jQuery hover(), которые запускали show() и hide(), но теперь я заменил это на CSS.

li.dynamic-children{
    position: relative
}

li.dynamic-children ul{
    display: none;
    position: absolute;
}

li.dynamic-children:hover ul{
    display: block;
    left: -1px;
    top: 18px;
    position: absolute;
    z-index: 100
}

li.dynamic-children:hover ul span{
    width: 100%
}

Выпадающее меню отображается успешно при наведении, однако, поскольку оно выполняется с помощью CSS, похоже, не существует способа гарантировать, что выпадающее окно сохраняется, когда пользователь отключается от ссылки, которая вызывает раскрывающийся список. Это означает, что пользователь не может выбрать какой-либо элемент в раскрывающемся меню, что делает его бесполезным.

Есть ли у кого-нибудь из вас какие-либо идеи относительно того, как я могу заставить меню сохраняться достаточно долго, чтобы пользователи могли сделать выбор для раскрывающихся меню?

РЕДАКТИРОВАТЬ:

Основываясь на приведенном ниже коде, я теперь включил следующие правила CSS:

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border-top:4px solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 1000 !important;
}


.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static {
    float: left;
    padding-bottom: 5px;
}

Эти правила заставляют меню сохраняться, однако в IE7 раскрывающееся меню теперь отстает от других элементов на странице, которые все еще бесполезны в этом браузере. Я пробовал множество исправлений z-index безрезультатно.