Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 29.12.2007 19:48

Ramles
Новичок
Зарегистрирован: 29.12.2007
Сообщений: 2

Странный эффект с выпадающим меню

Доброго всем!

Возникла проблема при создании выпадающего меню на сайте: http://dev.kp.ru/
Пункт "Спецпроекты" в главном горизонтальном меню.
Нормально отображается в ИЕ, Опере, а вот в Мозилле не хочет. Фон и текст выводятся поверх меню
Разбирался...
Нашел, что есть какая-то непонятная зависимость у перекрывающих выпадающее меню блоков со свойством overflow
При значении hidden - перекрывает, при значении visible - нет.
Но это решило часть проблемы, т.к. например у закладок на главной странице что работают с помощью ява-скрипта этого значения вообще нет, так же как и у надписи "Финансы". Выставление значения не помогает.

Вобщем вот весь код:

ХТМЛ:

<li class="last"><noindex><a href="#" onmouseover="showdiv('menuS3');" onmouseout="hidediv('menuS3');">Спецпроекты</a></noindex>
<ul id="menuS3" class="menuS" onmouseover="showdiv('menuS3');" onmouseout="hidediv('menuS3');">
  <li><a href="http://kp.ru/daily/auto/">Авто</a></li>
  <li><a href="http://kp.ru/daily/rubric/tv/">Телевизор "КП"</a></li>
  <li><a href="http://kp.ru/daily/health/">Красота и здоровье</a></li>
  <li><a href="http://kp.ru/daily/home/">Ваш дом и дача</a></li>

  <li><a href="http://kp.ru/daily/rest/">Досуг и туризм</a></li>
  <li><a href="http://kp.ru/daily/digital/">Умные вещи</a></li>
  <li><a href="http://kp.ru/daily/doxod/">Личные деньги</a></li>
  <li><a href="http://kp.ru/daily/animal/">Живой уголок</a></li>
  <li><a href="http://kp.ru/daily/shop/">За покупками</a></li>
  <li><a href="http://kp.ru/daily/gurman/">Приятного аппетита</a></li>

  <li><a href="http://kp.ru/daily/education/">Образование и работа</a></li>
  <li><a href="http://kp.ru/daily/bookcollection/">Книжная коллекция "КП"</a></li>
</ul>
</li>

ЦСС:

#main-menu ul li ul li {
    float: none;
    position: relative;
    width: 125px;
    top: 20px;
    display: block;
    overflow: visible;
    z-index: 256;
    padding: 3px 3px 4px 8px;
    border-right: 0px;
}

.last li {
  background-color: #568FC1;
  padding: 8px 0;
}

.last ul li a {
  width: 90px;
  background: none;
}

.menuS {
position: absolute;
left: 730px;
top: 215px;
visibility: hidden;
overflow: visible;
z-index: 256;
}

.menuS li {
position: relative;
width: 127px;
top: 20px;
overflow:visible;
z-index: 256;
}

Ну и ЯваСкрипт:

function showdiv(name){
if (document.all){
    eval('document.all.' + name + '.style.visibility = "visible" ');
} else if (document.layers) {
    eval('document.layers["' + name + '"].visibility = "visible" ');
} else if (document.getElementById) {
    eval('document.getElementById("' + name + '").style.visibility = "visible" ');
}}

function hidediv(name){
if (document.all){
    eval('document.all.' + name + '.style.visibility = "hidden" ');
} else if (document.layers) {
    eval('document.layers["' + name + '"].visibility = "hidden" ');
} else if (document.getElementById) {
    eval('document.getElementById("' + name + '").style.visibility = "hidden" ');
}}

Я понимаю, что проблема сия не 5 минут подумать, поискать.
Поэтому не за "спасибо" прошу помочь.

Нет на форуме

 

#2 30.12.2007 11:08

DAREDEVIL
Новичок
Зарегистрирован: 11.09.2007
Сообщений: 11

Re: Странный эффект с выпадающим меню

советую сделать выпадающее меню как описано здесь:
http://webmascon.com/topics/coding/42a.asp

Нет на форуме

 

#3 30.12.2007 12:34

Ramles
Новичок
Зарегистрирован: 29.12.2007
Сообщений: 2

Re: Странный эффект с выпадающим меню

Я изначально пошел по этому варианту (только css) - тоже самое. Содержимое, выводимое с помощью Ява скрипт и iframe уже существующее на сайте перекрывают это меню, задание z-index не помогает.
sad

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson