Проблема Internet Explorer с выпадающим меню sukerfish - PullRequest
Новая
       29

Проблема Internet Explorer с выпадающим меню sukerfish

0 голосов
/ 17 декабря 2010

У меня проблема с выпадающим меню только в IE, и я получаю различные результаты в другой версии.

Навигация, на которую я ссылаюсь, находится здесь: http://lt.philosophydesign.com/

Работает и отлично отображается в Firefox / Safari / Chrome. Он хорошо отображается в IE9 и IE8, однако при попытке перейти к первому элементу в раскрывающемся списке раскрывающийся список исчезает. В IE7 и IE6 раскрывающийся список отображается за основным содержанием.

Что также странно, так это то, что если я удаляю содержимое <div id="content">, навигация отображается и работает правильно в IE9 и IE8.

Вот CSS навигации: 

/* Navigation */
div#navcontainer {
    left:193px;
    position:absolute;
    top:108px;
    width:767px;
    z-index:1000;
}
div#navcontainer ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
}
div#navcontainer ul li {
    display:inline;
    float:left;
    margin-left:27px;
    position:relative;
}
div#navcontainer ul li a {
    color:#95006a;
    display:block;
    font-family:"LEWINRockwellExtraBoldRegular", "Arial Black", Gadget, sans-serif;
    font-size:14px;
    text-transform:uppercase;
    text-decoration:none;
}
div#navcontainer ul li.lightblue:hover a,
div#navcontainer ul li.lightblue.selected a,
div#navcontainer ul li.lightblue.sfHover a {
    color:#94CDF3;
}
div#navcontainer ul li.green:hover a,
div#navcontainer ul li.green.selected a,
div#navcontainer ul li.green.sfHover a {
    color:#71B9AE;
}
div#navcontainer ul li.limegreen:hover a,
div#navcontainer ul li.limegreen.selected a,
div#navcontainer ul li.limegreen.sfHover a {
    color:#BBD353;
}
div#navcontainer ul li.grey:hover a,
div#navcontainer ul li.grey.selected a,
div#navcontainer ul li.grey.sfHover a {
    color:#A8A9AC;
}
div#navcontainer ul li.darkblue:hover a,
div#navcontainer ul li.darkblue.selected a,
div#navcontainer ul li.darkblue.sfHover a {
    color:#1B2768;
}
div#navcontainer ul li.magenta:hover a,
div#navcontainer ul li.magenta.selected a,
div#navcontainer ul li.magenta.sfHover a {
    color:#CC2D88;
}
div#navcontainer ul li ul {
    position:absolute;
    top:-9999px;
    left:0;
    width:195px;
}
div#navcontainer ul li:hover ul, div#navcontainer ul li.sfHover ul{
    top:17px;
}
div#navcontainer ul li ul li {
    float:left;
    margin-left:0;
    width:195px;
}
div#navcontainer ul li ul li a {
    display:block;
    font-size:12px;
    margin-top:1px;
    padding: 2px 4px;
}
div#navcontainer ul li.lightblue ul li a {background:#94CDF3; color:#C9E6F9 !important;}
div#navcontainer ul li.green ul li a {background:#71B9AE; color:#C3DBD6 !important;}
div#navcontainer ul li.limegreen ul li a {background:#BBD353; color:#DFE9B0 !important;}
div#navcontainer ul li.grey ul li a {background:#A8A9AC; color:#D3D4D5 !important;}
div#navcontainer ul li.darkblue ul li a {background:#1B2768; color:#9092B0 !important;}
div#navcontainer ul li.magenta ul li a {background:#CC2D88; color:#D399C0 !important;}
div#navcontainer ul li.lightblue ul li a:hover,
div#navcontainer ul li.green ul li a:hover,
div#navcontainer ul li.limegreen ul li a:hover,
div#navcontainer ul li.grey ul li a:hover,
div#navcontainer ul li.darkblue ul li a:hover,
div#navcontainer ul li.magenta ul li a:hover {
    color:#fff !important;
}

А вот и навигационный HTML: 

<div id="navcontainer">
  <ul id="mainnav" class="nav">
    <li class="magenta<?php echo $selected['home']; ?>"><a href="/">Home</a></li>
    <li class="lightblue<?php echo $selected['location']; ?>"><a href="/location">Location</a>
      <ul>
        <li><a href="/location/area/travel">Travel</a></li>
        <li><a href="/location/area/parks">Parks</a></li>
        <li><a href="/location/area/shops">Shops</a></li>
        <li><a href="/location/area/leisure">Leisure</a></li>
        <li><a href="/location/area/eatdrink">Eat &amp; Drink</a></li>
      </ul>
    </li>
    <li class="green<?php echo $selected['specification']; ?>"><a href="/specification">Specification</a>
      <ul>
        <li><a href="/specification/area/general">General</a></li>
        <li><a href="/specification/area/kitchen">Kitchen</a></li>
        <li><a href="/specification/area/bedroom">Bedroom</a></li>
        <li><a href="/specification/area/bathroom">Bathroom</a></li>
      </ul>
    </li>
    <li class="limegreen<?php echo $selected['plans']; ?>"><a href="/plans">Plans</a>
      <ul>
        <li><a href="/plans/area/1bed">1 Bedroom Apartments</a></li>
        <li><a href="/plans/area/2bed">2 Bedroom Apartments</a></li>
      </ul>
    </li>
    <li class="grey<?php echo $selected['gallery']; ?>"><a href="/gallery">Gallery</a>
      <ul>
        <li><a href="/gallery/area/gallery">View Gallery</a></li>
      </ul>
    </li>
    <li class="darkblue<?php echo $selected['about-us']; ?>"><a href="/about-us">About Us</a></li>
    <li class="magenta<?php echo $selected['contact-us']; ?>"><a href="/contact-us">Contact Us</a></li>
  </ul>
</div>

И у меня есть несколько jQuery для добавления класса в hovered LI, так как IE7 <не поддерживает: hover для чего-либо, кроме тегов A. </p> 

$("div#navcontainer ul li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer ul li").mouseleave( function() { $(this).removeClass("sfHover"); } );

Может кто-нибудь помочь мне понять, почему это не работает в IE?

Спасибо

Scott

1 Ответ

1 голос
/ 17 декабря 2010

Порядок размещения в IE7 работает иначе, чем в других браузерах. Добавьте z-index:2 к #header и z-index:1 к #content. Это даст вам те же результаты, что и IE8 и 9.

Этот результат вызван пробелами между li. Если вы двигаетесь достаточно быстро, вы можете выбрать нижние предметы. Сейчас я ищу решение этой проблемы.

EDIT

Не 100% это будет работать во всех браузерах, но здесь вы идете: Проблема легко решается добавлением цвета фона в выпадающий список ul. Я предполагаю, что это нежелательно, поэтому вы можете добавить фон прозрачного GIF размером 1 на 1 пиксель (должен быть крошечный файл ...), который решит проблему и сохранит эстетику

Немного хак, но IE - это такой браузер! Удивил, что это не работает в IE9, хотя

Надеюсь, это поможет

EDIT

Я думаю, что проблема IE6 связана с вашим javascript. Попробуйте использовать «>» в ​​вашем селекторе. Это получает прямой дочерний элемент (как в моем примере ниже). Таким образом, ваша функция не сработает, если вы наведите курсор мыши на один из выпадающих списков разделов. Или попробуйте этот код (полностью непроверенный и, безусловно, нуждающийся в уточнении): 

$("div#navcontainer > ul > li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer > ul > li > ul").mouseleave( function() { $(this).parent().removeClass("sfHover"); } );

Поскольку позиционирование удаляет ul из потока документа, это также может способствовать его раннему запуску.

...