Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Резиновая ширина всплывающих подпунктов в меню

Автор: Vorona 31.3.2009, 22:17

Добрый день всем!

Используя идеи для реализации горизонтального всплывающего меню на основе CSS, приведенные по этой ссылке http://www.alexilin.ru/dynamic-menu-without-javascript/ , интегрировала его в свой шаблон.

Проблема вот в чем: пример в ссылке сверстан из расчета фиксированной ширины пунктов меню, тогда как мой сайт сверстан относительно.

В ФФ, Опере, ИЕ7 сумела добиться корректной работы ( http://investclub.com.ua/devel/ ), а в ИЕ6 не могу понять, как задать элементам
#menu ul li a:hover ul li
ширину, равную ширине родительского элемента #menu ul li
Т.к. мы говорим о всплывающем элементе, спозиционирован он абсолютно, и фокус width=100% в ИЕ не проходит (в ФФ и Опере - окей).

Временно пришлось выставить фиксированную ширину всплывающих пунктов в 120рх, но хотелось бы довести дело до конца.

Помогите, пожалуйста, если знаете как можно покорить упрямый ИЕ6. Заранее большое спасибо!

smile

Автор: NDenis 1.4.2009, 13:24

Vorona, а для #menu ul li ul прописать width:100%;?

Автор: Vorona 2.4.2009, 23:25

Цитата(NDenis @ 1.4.2009, 13:24

)

#menu ul li ul

Я конечно же, попробовала сделать так с самого начала, только для
* html #menu ul li a:hover ul
Hикакого результата smile

Проследим иерархию. Вверху стоит блок:

Код


* html #menu ul li{
    position:relative;
    width: 16%;
}

Следом за ним для корректной работы в ИЕ6 авторы шаблона предлагают использовать а, внутри которого будет продолжаться иерархия.
Если для него выставляю width:100%;, ничего не работает, - всплывающее меню имеет ширину в 1 пиксель, почему-то ((
Потому для а явно ширины не задаю:

Код


* html  #menu ul li a{
    height:20%;
}

Вы предлагаете сделать

Код


* html #menu ul li a:hover ul{
    display:block;
    position:absolute;
    left:1%;
    top:100%;
    width:100%;
}

Но это, к сожалению, не приводит к изменениями, - блоки по прежнему имеют ширину в соотв. с содержащимся в них контентом.
Потому, чтобы шаблон имел хоть какой-то вид, я оставила фиксированную ширину width:120px; для всплывающих блоков.

Вопрос извечный, - что же делать smile