Как я могу сделать это подменю 100% высоты?

Question

У меня есть это меню здесь , и я хочу, чтобы подменю было на 100% больше, чем в верхнем меню.
Но ссылки подменю должны оставаться в том месте, где они находятся, только черный фон должен иметь 100% высоты.

Я пробовал это с height:100% в #subMenusContainer, но я думаю, что это делает только высоту всех ссылок в нем.

Нужно ли мне читать высоту страницы с помощью JS, а затем вычислять поля / высоты?
Или есть более простая версия с css?

Для этого примера я использую Mootools Menumatic, но в jsFiddle я не использую JS, я только опубликовал код.

Навигация должна выглядеть как эта , когда вы наводите курсор мыши на продукты.

Встречает Макс

Answer 1

Я внес несколько изменений в ваш CSS, это желаемый эффект?- http://jsfiddle.net/ajthomascouk/JPtRb/

Я в основном сделал следующее:

i) сделал контейнер прозрачным background-color, a width и спрятал overflow

#container{background-color:transparent; overflow:hidden; width:400px}

ii) дал #nav черный background-color и height 100% (измените это на то, что вы хотите)

#nav{background-color:#000; height:100%;}

iii) изменил top:60px на padding-top:60pxна #nav iv) Использовал borders для получения желаемого эффекта:

#nav ul{border-top:1000px solid #000; border-bottom:1000px solid #000; position:relative; top:-965px; }

Я думаю, это то, чего вы пытались достичь ...?