Меню UL отображается за вкладкой jQuery UI и изображениями

Я создал HTML-страницу, которая использует простой CSS (без javascript) для навигации по меню. Однако я использую вкладку пользовательского интерфейса jQuery для отображения данных с вкладками на той же странице.

Когда меню раскрывается, оно появляется ЗА вкладками jQuery (фактически, меню также появляется ЗА любыми изображениями в тексте, поверх которых раскрывается меню.

Мой (простой) HTML выглядит так:

<html>
    <body>
        <div>
            <div id="navigation2">
                <ul id="menu" style="margin-left:5px;">
                <li class="navigable">
                        <a class="menuitem" href="#">Foo</a>
                  <ul class="submenu">
                        <li><a href="">Foo Bar 1</a></li>
                     <li><a href="">Foo Bar 2</a></li>
                        <li><a href="">Foo Bar 3</a></li>
                  </ul>
               </li>
           </ul>
         </div>
      </div>
      <div id ="tdisp">
      <!-- jQuery tab display here ... -->
      </div>      
    </body>
</html>

и файл CSS выглядит так:

#navigation2{

    background-color: #2d2d2d;

    color: #FFFFFF;

    height: 35px;

    list-style-type: none;

    font-size: 15px;

}



#navigation2 ul li {

    list-style-type: none;

    padding: 7px 20px 7px 5px;

    float: left;

    }



#navigation2 a.menuitem, #navigation2 a.undecorated {

    color: #CCCCCC;

    text-decoration: none;

}





#navigation2 a.current{

    color:#FF0000;

}



#navigation2 ul li.navigable:hover {

    cursor: pointer;

    color: #FFFFFF;

    background-color: #535354;

    border-bottom-color: #c00000;

    border-bottom-width: 2px;

    border-bottom-style: solid;

}

Я подозреваю, что это как-то связано с z-порядком, но я не уверен и хотел бы услышать мнение экспертов о том, как решить эту проблему.

[[Изменить]]

Из ответов, которые я получил до сих пор, кажется, что виноват z-index. Однако может ли кто-нибудь предоставить более подробную информацию о том, как это исправить? (На самом деле я разработчик C++, поэтому для меня это незнакомая территория).

  • Добавлять атрибут z-index в КАЖДОЕ правило, связанное с navigation2, или только в одно? - если требуется только один, к какой записи правила в файле CSS добавить z-индекс?

  • Как проверить z-index вкладки jQuery с помощью (предпочтительно) инструментов разработчика FF Firebug или Chrome?


html jquery css jquery-ui jquery-ui-tabs
person Homunculus Reticulli    schedule 15.11.2011    source источник
comment
Спасибо, Майкл. Я заставил его работать (вместо этого мне пришлось добавить z-index в #naviagtion2 ul li)   -  person Homunculus Reticulli    schedule 15.11.2011

Ответы (4)


arrow_upward
1
arrow_downward

Джейк прав. Поднимите Z-индекс. Вы можете проверить Z-индекс вкладки jquery в инструментах Chrome Dev, чтобы убедиться, что вы выбрали более высокий Z-индекс. Единственная причина, по которой я говорю проверить Chrome Dev Tools (или Firebug), заключается в том, что диалоговое окно пользовательского интерфейса jQuery имеет Z-индекс 1000, когда я последний раз проверял. Просто используйте смехотворно большой #

person mithun_daa    schedule 15.11.2011

arrow_upward
1
arrow_downward

Я бы попробовал увеличить атрибут z-index в вашем элементе navigation2 до чего-то большого в качестве теста - попробуйте 1000.

person Jake Feasel    schedule 15.11.2011

arrow_upward
0
arrow_downward

Если у вас нет проблем с прокруткой IE, просто удалите «position: relative» в jquery.ui.tabs.css или в jquery-ui-*.css.

.ui-tabs { /*position: relative;*/ padding: .2em; zoom: 1; }

Нет необходимости устанавливать z-index.

person Remy    schedule 18.04.2013

arrow_upward
0
arrow_downward

@Remy - спасибо, твой ответ полностью спас меня. Я закинул это на свою страницу:

<!--[if IE 7]>
<style type="text/css">
    .ui-tabs {
        position: static;
    }
    .ui-tabs .ui-tabs-nav LI {
        position: static;
    }
</style>
<![endif]-->

И это работало как чам. IE7 станет моей смертью.

person loops-99    schedule 18.09.2013