Javascript 我的Jquery下拉菜单使我的Jquery幻灯片无法浏览

我正在为一个客户建立一个网站，它需要一个下拉导航菜单和一个头版幻灯片。问题是下拉菜单在幻灯片后面

我曾尝试将#幻灯片的z索引更改为-2，这成功地将菜单置于幻灯片上方，但幻灯片上的信息不再可选择或单击。（我希望幻灯片中的标题链接到其他页面）

在每一个页面上，菜单都会像预期的那样在文本上方下拉，文本仍然是可选择的，因此我所能想到的是，幻灯片和下拉菜单中的javascript存在某种问题/冲突。我对html和css非常熟悉，但对javascript完全是新手，所以我真的不知道如何找到所说的冲突。我读到的所有内容都回到了z-index，但似乎没有解决正在发生的选择问题。感谢您的帮助

这是我正在使用的代码

用于幻灯片放映的HTML

<div id="slides">
<div>
    <img src="/images/slide_building.jpg" alt=""/>
    <h1><img src="/images/h1.jpg" alt="" class="header">Current Happenings</h1>
    <h2>October 9, 2013</h2>
        <p>We are launching our new website, making it even easier to find out about our products and services, get technical information, or contact us. Take a look around, and if you have any questions or feedback, please contact us!</p>
</div>  
<div>
    <img src="/images/slide_partners.jpg" alt=""/>
    <h1><a href="/product_admissionEdits.php"><img src="/images/h1.jpg" alt="" class="header">Admission Edit Software</a></h1>
        <p>This product allows the users to take control of an account from first contact with the patient and know immediately how accurate the information in the admission is. Premier's Admission Edit products gives your users a score card of any errors and gives them the ability to fix them while the patient is available and motivated to expedite the process. Premier can customize a library of Hospital specific admission edits designed for your hospital making sure the account is accurate at the time of admission.</p>
</div>   
<div>
    <img src="/images/slide_steth.jpg" alt="http://www.shutterstock.com/cat.mhtml?searchterm=hospital+computer&search_group=&lang=en&search_source=search_form#id=140644489&src=3uHB0fCguB0lZT5f9lk8mA-1-13"/>
    <h1><a href="/product_clearingHouse.php"><img src="/images/h1.jpg" alt="" class="header">Premier Clearing House</a></h1>
        <p>Premier&rsquo;s Clearing House and Claims Management is the only Clearing House solution, integrated (not interfaced), with MedSeries4&reg; on the Market today. Together with Premiers vast knowledge of MedSeries4&reg;, Our goal is to help you send each claim out the door as clean as possible to ensure a quick positive response from Payers. Once the claim has been submitted, our Claims Management system provides ways to track the claim with continual status updates received from your payers. Our Remittance product imports each remit and updates Claim Management with the final result. Any issues? Simply look at the Claims Management worklist! This and many more tools, have been developed to help you get paid. Let the power of the system you already have work for YOU!!</p>
</div>  
<div>
    <img src="/images/slide_reception.jpg" alt="http://www.shutterstock.com/cat.mhtml?lang=en&search_source=search_form&search_tracking_id=3uHB0fCguB0lZT5f9lk8mA&version=llv1&anyorall=all&safesearch=1&searchterm=receptionist+computer+hospital&search_group=&orient=&search_cat=&searchtermx=&photographer_name=&people_gender=&people_age=&people_ethnicity=&people_number=&commercial_ok=&color=&show_color_wheel=1#id=144113761&src=cN4N1pX8F0uxW6Zcbd_PWA-1-80"/>
    <h1><img src="/images/h1.jpg" alt="" class="header">MS4 Software</h1>
        <p>Premier Software assists MS4 Hospitals by increasing cash flow by improving accuracy, efficiency and reducing revenue loss attributed to revenue denial.</p>
</div> 
<div>
    <img src="/images/slide_keyboard.jpg" alt="http://www.shutterstock.com/cat.mhtml?lang=en&search_source=search_form&search_tracking_id=cN4N1pX8F0uxW6Zcbd_PWA&version=llv1&anyorall=all&safesearch=1&searchterm=computer&search_group=&orient=&search_cat=&searchtermx=&photographer_name=&people_gender=&people_age=&people_ethnicity=&people_number=&commercial_ok=&color=&show_color_wheel=1#id=95538487&src=NPI2DkDXSeFoSFVNYRh3FQ-1-8"/>
    <h1><img src="/images/h1.jpg" alt="" class="header">ICD 10</h1>
        <p>Are you ready for ICD-10?  Let us provide you with a readiness assessment, technology Gap analysis and help you be prepared with the following      ICD-10 goals</p>
        <ol>
            <li>Completeness. A unique code for all substantially different procedures.</li>
            <li>Expandability. When new procedures are developed a unique new code can be created.</li>
            <li>Standardized Terminology. Each term should be assigned a specific meaning, with no multiple meaning for the same term.</li>
        </ol>
</div>       

#slides img{
    float: left;
    margin-right: 30px;
}

h1 img.header{
    margin-right:10px !important;
}

#slides h2 {
margin-top: 0;}

#slides {
  display: none
  width: 1130px;
}

#slides div{
    position: relative;
    z-index: -1;
}

/*Navigation Buttons*/

#slides .slidesjs-navigation {
  margin-top:5px;
}

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
  background-image: url(/images/btns-next-prev.png);
  background-repeat: no-repeat;
  display:block;
  width:12px;
  height:18px;

  text-indent: -9999px;
  float: left;
  margin-right:5px;
}

a.slidesjs-next {
  margin-right:10px;
  background-position: -12px 0;
}

a:hover.slidesjs-next {
  background-position: -12px -18px;
}

a.slidesjs-previous {
  background-position: 0 0;
}

a:hover.slidesjs-previous {
  background-position: 0 -18px;
}

a.slidesjs-play {
  width:15px;
  background-position: -25px 0;
}

a:hover.slidesjs-play {
  background-position: -25px -18px;
}

a.slidesjs-stop {
  width:18px;
  background-position: -41px 0;
}

a:hover.slidesjs-stop {
  background-position: -41px -18px;
}

.slidesjs-pagination {
  margin: 7px 0 0;
  float: right;
  list-style: none;
}

.slidesjs-pagination li {
  float: left;
  margin: 0 1px;
}

.slidesjs-pagination li a {
  display: block;
  width: 13px;
  height: 0;
  padding-top: 13px;
  background-image: url(/images/pagination.png);
  background-position: 0 0;
  float: left;

}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
  background-position: 0 -13px
}

.slidesjs-pagination li a:hover {
  background-position: 0 -26px
}

#slides a:link,
#slides a:visited {
  color: #333
}

#slides a:hover,
#slides a:active {
  color: #9e2020
}


/*----- End SlidesJS Optional -----*/

/*----- SlidesJS Required: These styles are required if you'd like a responsive slideshow-----*/

#slides {
  display: none
}

$(function() {
  $('#slides').slidesjs({
    width: 940,
    height: 340,
    play: {
      active: true,
      auto: true,
      interval: 10000,
      swap: true
    }
  });
});

幻灯片放映的Jquery文件（Jquery 1.9.1）

用于导航的HTML

<div class="example">
<div class="menu">
        <ul id="nav">
            <li><a href="/index2.php">HOME</a>
            <?php navPage($navSection,"PRODUCTS","products","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <li><a href="/products.php">View All Products</a></li>
                            <li><a href="/product_admissionEdits.php">Admission Edit Software</a></li>
                            <li><a href="/product_medicalNecessity.php">Premier Medical Necessity</a></li>
                            <li><a href="/product_electronicRemittance.php">Electronic Remittance Advice and History</a></li>
                            <li><a href="/product_cashReceipts.php">Cash Receipts</a></li>
                            <li><a href="/product_denialManagement.php">Denial Management</a></li>
                            <li><a href="/product_expressCinCout.php">Express Check in Check out</a></li>
                            <li><a href="/product_clearingHouse.php">Premier Clearing House&mdash;EDI Solutions  837 I &amp; P ; 835</a></li>
                            <li><a href="/product_arTracking.php">Financial Class AR Tracking</a></li>
                            <li><a href="/product_insuranceEligibility.php">Insurance Eligibility Verification 270 /271</a></li>
                            <li><a href="/product_superBill.php">Super Bill</a></li>
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of "products"-->
            <?php navPage($navSection,"SERVICES","services","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <li><a href="/services.php">View All Services</a></li>
                            <li><a href="/services_projMgt.php">Project Management</a></li>
                            <li><a href="/services_analysisPlanning.php">Project Analysis and Planning</a></li>
                            <li><a href="/services_re.php">RE</a></li>
                            <li><a href="/services_releaseUp.php">Release Upgrades</a></li>
                            <li><a href="/services_implementation.php">Implementation</a></li>
                            <li><a href="/services_training.php">Training</a></li>
                            <li><a href="/services_contractProg.php">Contract Programming</a></li>
                            <li><a href="/services_outsourcing.php">Outsourced Services</a></li>
                            <li><a href="/services_conversion.php">Conversion Services</a></li>
                            <li><a href="/services_afterHours.php">After Hours Support</a></li>
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of "services"-->
            <?php navPage($navSection,"TECHNICAL","technical","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <!--<li><a href="/technical.php">Technical</a></li>-->
                            <li><a href="/technical_version.php">Current Release Levels</a></li>
                            <!--<li><a href="/technical_news.php">Quarterly News</a></li>-->
                            <!--<li><a href="/technical_updates.php">Quarterly Updates</a></li>-->
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of technical-->
            <?php navPage($navSection,"COMPANY","company","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <li><a href="/company.php">About Premier</a></li>
                            <li><a href="/company_management.php">Management</a></li>
                            <li><a href="/company_clients.php">Client Map</a></li>
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of technical-->
            <?php navPage($navSection,"CONTACT","contact","/contact.php"); ?>
        </ul><!--end of "nav" list-->

</div><!--end of "menu"-->
</div><!--end of "example"-->

#current > a{
    background: #21148A url('/images/navbulletcurrent.png') top left no-repeat;
}

#nav{
    list-style:none;
    font-weight:600;
    font-stretch:condensed;
    font-size:large;
    letter-spacing: 1px;
    float:left;
    width:100%;
    margin-top: 33px;
    margin-left: -40px;
    margin-bottom: 30px;

}

#nav li {
    float:left;
    padding:0;
    margin-right:0px;
    width:188.33px;
    text-align:center;
    background:#810046;

}

#nav li a{
    color:#fff;
    display:block;
    text-decoration:none;
    padding:5px;
}



#nav li a:hover {
    background:#21148A;
    text-decoration:none;
    color:#fff;
}

#nav > li.selected > a {
    background:#21148A;
}

#nav li div div {

    display:none;
    width:188.33px;
    position:absolute;

}

#nav li ul li{
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 2px;
    padding-top: 2px;
    width:138.33px;
    background:#21148A url('/images/navbullet.jpg') no-repeat 16px 14px;
    color:#fff;
    margin-left:-40px;
    text-align:left;
}

#nav li ul li:hover a{
    background:#505050;
}

#nav li ul li:hover{
    background:#505050;
}

#nav ul{
    list-style:none;

}

#nav ul li{
    float:none;
    border-top:1px dotted #505050;
    text-align: left;
    font-size:medium;

}

jQuery(window).load(function() {

$("#nav > li > a").click(function () { // binding onclick
    if ($(this).parent().hasClass('selected')) {
        $("#nav .selected div div").slideUp(100); // hiding popups
        $("#nav .selected").removeClass("selected");
    } else {
        $("#nav .selected div div").slideUp(100); // hiding popups
        $("#nav .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(200);
        }
    }
}); 

});

用于导航的Javascript

<div class="example">
<div class="menu">
        <ul id="nav">
            <li><a href="/index2.php">HOME</a>
            <?php navPage($navSection,"PRODUCTS","products","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <li><a href="/products.php">View All Products</a></li>
                            <li><a href="/product_admissionEdits.php">Admission Edit Software</a></li>
                            <li><a href="/product_medicalNecessity.php">Premier Medical Necessity</a></li>
                            <li><a href="/product_electronicRemittance.php">Electronic Remittance Advice and History</a></li>
                            <li><a href="/product_cashReceipts.php">Cash Receipts</a></li>
                            <li><a href="/product_denialManagement.php">Denial Management</a></li>
                            <li><a href="/product_expressCinCout.php">Express Check in Check out</a></li>
                            <li><a href="/product_clearingHouse.php">Premier Clearing House&mdash;EDI Solutions  837 I &amp; P ; 835</a></li>
                            <li><a href="/product_arTracking.php">Financial Class AR Tracking</a></li>
                            <li><a href="/product_insuranceEligibility.php">Insurance Eligibility Verification 270 /271</a></li>
                            <li><a href="/product_superBill.php">Super Bill</a></li>
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of "products"-->
            <?php navPage($navSection,"SERVICES","services","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <li><a href="/services.php">View All Services</a></li>
                            <li><a href="/services_projMgt.php">Project Management</a></li>
                            <li><a href="/services_analysisPlanning.php">Project Analysis and Planning</a></li>
                            <li><a href="/services_re.php">RE</a></li>
                            <li><a href="/services_releaseUp.php">Release Upgrades</a></li>
                            <li><a href="/services_implementation.php">Implementation</a></li>
                            <li><a href="/services_training.php">Training</a></li>
                            <li><a href="/services_contractProg.php">Contract Programming</a></li>
                            <li><a href="/services_outsourcing.php">Outsourced Services</a></li>
                            <li><a href="/services_conversion.php">Conversion Services</a></li>
                            <li><a href="/services_afterHours.php">After Hours Support</a></li>
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of "services"-->
            <?php navPage($navSection,"TECHNICAL","technical","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <!--<li><a href="/technical.php">Technical</a></li>-->
                            <li><a href="/technical_version.php">Current Release Levels</a></li>
                            <!--<li><a href="/technical_news.php">Quarterly News</a></li>-->
                            <!--<li><a href="/technical_updates.php">Quarterly Updates</a></li>-->
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of technical-->
            <?php navPage($navSection,"COMPANY","company","#"); ?>
                <div class="subs">
                    <div>
                        <ul>
                            <li><a href="/company.php">About Premier</a></li>
                            <li><a href="/company_management.php">Management</a></li>
                            <li><a href="/company_clients.php">Client Map</a></li>
                        </ul>
                    </div>
                </div><!--end of "subs"-->
            </li><!--end of technical-->
            <?php navPage($navSection,"CONTACT","contact","/contact.php"); ?>
        </ul><!--end of "nav" list-->

</div><!--end of "menu"-->
</div><!--end of "example"-->

#current > a{
    background: #21148A url('/images/navbulletcurrent.png') top left no-repeat;
}

#nav{
    list-style:none;
    font-weight:600;
    font-stretch:condensed;
    font-size:large;
    letter-spacing: 1px;
    float:left;
    width:100%;
    margin-top: 33px;
    margin-left: -40px;
    margin-bottom: 30px;

}

#nav li {
    float:left;
    padding:0;
    margin-right:0px;
    width:188.33px;
    text-align:center;
    background:#810046;

}

#nav li a{
    color:#fff;
    display:block;
    text-decoration:none;
    padding:5px;
}



#nav li a:hover {
    background:#21148A;
    text-decoration:none;
    color:#fff;
}

#nav > li.selected > a {
    background:#21148A;
}

#nav li div div {

    display:none;
    width:188.33px;
    position:absolute;

}

#nav li ul li{
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 2px;
    padding-top: 2px;
    width:138.33px;
    background:#21148A url('/images/navbullet.jpg') no-repeat 16px 14px;
    color:#fff;
    margin-left:-40px;
    text-align:left;
}

#nav li ul li:hover a{
    background:#505050;
}

#nav li ul li:hover{
    background:#505050;
}

#nav ul{
    list-style:none;

}

#nav ul li{
    float:none;
    border-top:1px dotted #505050;
    text-align: left;
    font-size:medium;

}

jQuery(window).load(function() {

$("#nav > li > a").click(function () { // binding onclick
    if ($(this).parent().hasClass('selected')) {
        $("#nav .selected div div").slideUp(100); // hiding popups
        $("#nav .selected").removeClass("selected");
    } else {
        $("#nav .selected div div").slideUp(100); // hiding popups
        $("#nav .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(200);
        }
    }
}); 

});

---

更好地理解cssz索引栈对于这一点是必要的。我还没有解决方案，但它也可能与webkit bug有关，因为它可以在firefox上正常工作（见图）。为什么使用浮动（浮动：左）菜单！您使用什么扩展来查看此视图？它是firefox的默认元素检查器（而不是firebug）。点击右边菜单上的第二个按钮“立方体”。谢谢。我仍然在我的主机上使用Firefox8。