Конфликт выпадающего меню css слайдера Nivo

Я работаю над веб-сайтом, на который пытаюсь добавить слайдер nivo. Проблема, с которой я сталкиваюсь, заключается в том, что ползунок закрывает раскрывающееся меню css, и я не вижу стрелок направления в меню.

Когда я добавил z-index:-50 в строку .nivoSlider в файле nivo-slider.css, меню заработало как надо, не прячась за ползунок, но у меня все еще нет навигационных стрелок, и теперь навигация стрелки внутри фактического ползунка (влево или вправо) видны, но не работают.

Ссылка для просмотра этих проблем находится здесь.

Любая предложенная помощь будет оценена по достоинству. Спасибо, Джо


menu slider css nivo-slider
person user1567441    schedule 02.08.2012    source источник
comment
Я только что прошел через ваш сайт. Вместо изменения z-индекса ползунка измените zindex .dropmenu li ul li a. Я попробовал это работало хорошо для меня.   -  person Vinay    schedule 02.08.2012

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, сначала удалите z-index из .nivoSlider. Вторая и самая важная часть - у вас есть такая структура меню:

<ul id="nav-one" class="dropmenu css-only">
<li><a style="border-left:1px solid #CCCCCC; padding-left:23px; padding-right:23px;" href="index.php">Home</a></li>

<li><a href="company.php">Company</a>
    <ul class="SomeNewClass">
    <li><a href="history.php">History</a></li>
    <li><a href="markets.php">Markets</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="licensee-advisory-board.php">Licensee Advisory Board</a></li>
    <li><a href="copyright-notice.php">Copyright Notice</a></li>
    </ul>
    </li>
<li><a href="branding.php">Branding</a>
    <ul class="SomeNewClass">
    <li><a href="graphics.php">Graphics</a></li>
    <li><a href="signs.php">Signs</a></li>
    <li><a href="paint.php">Paint</a></li>
    <li><a href="dispenser-doorSkins.php">Dispenser DoorSkins</a></li>
    <li><a href="dispenser-overlays.php">Dispenser Overlays</a></li>
    <li><a href="image-manual.php">Image Manual</a></li>
    <li><a href="image-evaluation-form.php">Image Evaluation Form</a></li>
    </ul>
</li>
<li><a href="payments-processing.php">Payments Processing</a>
    <ul class="SomeNewClass">
    <li><a href="fleet-card.php">Fleet Card</a></li>
    <li><a href="echoSat.php">EchoSat</a></li>
    <li><a href="PCI-compliance.php">PCI Compliance</a></li>
    <li><a href="transnational.php">TransNational</a></li>
    </ul>
</li>
....
....
....

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

.SomeNewClass
{
    z-index: 99999;
}
person Miljan Puzović    schedule 02.08.2012
comment
Спасибо за помощь, я очень ценю это. Мне было интересно, не могли бы вы помочь мне еще с одним. Если вы посмотрите на любую другую страницу того же веб-сайта, здесь: clarkbrands.com/index.php Вы можете видеть, что в раскрывающемся меню есть стрелки навигации. Если вы посмотрите на страницу со ползунком nivo: clarkbrands.com/gallery2.php выпадающее меню не имеет стрелок. Опять же, любая помощь будет оценена по достоинству. - person user1567441; 04.08.2012
comment
:) Вы забыли добавить ‹span class=arrow›‹/span› внутри каждого элемента ‹a› с раскрывающимися параметрами в теге ‹li› :) (Примечание на будущее: я рекомендую вам использовать удивительность элемента Inspect в Google Chrome и Firebug в Firefox, это спасет вам жизнь :) ) - person Miljan Puzović; 04.08.2012
comment
Я не понимаю, можешь привести пример. - person user1567441; 04.08.2012
comment
На страницах со стрелками в меню структура меню такая: ‹li›‹a›**некоторый текст ссылки**‹span class=arrow›‹span›‹a/›‹/li›. Таким образом, на странице со слайдером Nivo вообще нет этого ‹span class=arrow›‹/span›. Вы забыли добавить эту строку кода. - person Miljan Puzović; 04.08.2012
comment
Я с удовольствием помогаю другим, потому что другие помогают мне ;) Поэкспериментируйте с этой опцией Inspect Element в Google Chrome (щелкните правой кнопкой мыши на любом элементе, который вы собираетесь проверить), это действительно незаменимый инструмент в работе. Удачи ;) - person Miljan Puzović; 04.08.2012