0

我正在为需要下拉导航菜单以及首页幻灯片的客户构建网站。问题是下拉菜单在幻灯片后面。

请参阅幻灯片后面的下拉菜单

我尝试将#slides 的 z-index 更改为 -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>       

幻灯片的 CSS

#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
}

幻灯片的 Jquery 文件 (jquery 1.9.1)

(function(){(function(e,t,n){var r,i,s;s="slidesjs";i={width:940,height:528,start:1,navigation:{active:!0,effect:"slide"},pagination:{active:!0,effect:"slide"},play:{active:!1,effect:"slide",interval:5e3,auto:!1,swap:!0,pauseOnHover:!1,restartDelay:2500},effect:{slide:{speed:500},fade:{speed:300,crossfade:!0}},callback:{loaded:function(){},start:function(){},complete:function(){}}};r=function(){function t(t,n){this.element=t;this.options=e.extend(!0,{},i,n);this._defaults=i;this._name=s;this.init()}return t}();r.prototype.init=function(){var n,r,i,s,o,u,a=this;n=e(this.element);this.data=e.data(this);e.data(this,"animating",!1);e.data(this,"total",n.children().not(".slidesjs-navigation",n).length);e.data(this,"current",this.options.start-1);e.data(this,"vendorPrefix",this._getVendorPrefix());if(typeof TouchEvent!="undefined"){e.data(this,"touch",!0);this.options.effect.slide.speed=this.options.effect.slide.speed/2}n.css({overflow:"hidden"});n.slidesContainer=n.children().not(".slidesjs-navigation",n).wrapAll("<div class='slidesjs-container'>",n).parent().css({overflow:"hidden",position:"relative"});e(".slidesjs-container",n).wrapInner("<div class='slidesjs-control'>",n).children();e(".slidesjs-control",n).css({position:"relative",left:0});e(".slidesjs-control",n).children().addClass("slidesjs-slide").css({position:"absolute",top:0,left:0,width:"100%",display:"none",webkitBackfaceVisibility:"hidden"});e.each(e(".slidesjs-control",n).children(),function(t){var n;n=e(this);return n.attr("slidesjs-index",t)});if(this.data.touch){e(".slidesjs-control",n).on("touchstart",function(e){return a._touchstart(e)});e(".slidesjs-control",n).on("touchmove",function(e){return a._touchmove(e)});e(".slidesjs-control",n).on("touchend",function(e){return a._touchend(e)})}n.fadeIn(0);this.update();this.data.touch&&this._setuptouch();e(".slidesjs-control",n).children(":eq("+this.data.current+")").eq(0).fadeIn(0,function(){return e(this).css({})});if(this.options.navigation.active){o=e("<a>",{"class":"slidesjs-previous slidesjs-navigation",href:"#",title:"Previous",text:"Previous"}).appendTo(n);r=e("<a>",{"class":"slidesjs-next slidesjs-navigation",href:"#",title:"Next",text:"Next"}).appendTo(n)}e(".slidesjs-next",n).click(function(e){e.preventDefault();a.stop(!0);return a.next(a.options.navigation.effect)});e(".slidesjs-previous",n).click(function(e){e.preventDefault();a.stop(!0);return a.previous(a.options.navigation.effect)});if(this.options.play.active){s=e("<a>",{"class":"slidesjs-play slidesjs-navigation",href:"#",title:"Play",text:"Play"}).appendTo(n);u=e("<a>",{"class":"slidesjs-stop slidesjs-navigation",href:"#",title:"Stop",text:"Stop"}).appendTo(n);s.click(function(e){e.preventDefault();return a.play(!0)});u.click(function(e){e.preventDefault();return a.stop(!0)});this.options.play.swap&&u.css({display:"none"})}if(this.options.pagination.active){i=e("<ul>",{"class":"slidesjs-pagination"}).appendTo(n);e.each(new Array(this.data.total),function(t){var n,r;n=e("<li>",{"class":"slidesjs-pagination-item"}).appendTo(i);r=e("<a>",{href:"#","data-slidesjs-item":t,html:t+1}).appendTo(n);return r.click(function(t){t.preventDefault();a.stop(!0);return a.goto(e(t.currentTarget).attr("data-slidesjs-item")*1+1)})})}e(t).bind("resize",function(){return a.update()});this._setActive();this.options.play.auto&&this.play();return this.options.callback.loaded(this.options.start)};r.prototype._setActive=function(t){var n,r;n=e(this.element);this.data=e.data(this);r=t>-1?t:this.data.current;e(".active",n).removeClass("active");return e(".slidesjs-pagination li:eq("+r+") a",n).addClass("active")};r.prototype.update=function(){var t,n,r;t=e(this.element);this.data=e.data(this);e(".slidesjs-control",t).children(":not(:eq("+this.data.current+"))").css({display:"none",left:0});r=t.width();n=this.options.height/this.options.width*r;this.options.width=r;this.options.height=n;return e(".slidesjs-control, .slidesjs-container",t).css({width:r,height:n})};r.prototype.next=function(t){var n;n=e(this.element);this.data=e.data(this);e.data(this,"direction","next");t===void 0&&(t=this.options.navigation.effect);return t==="fade"?this._fade():this._slide()};r.prototype.previous=function(t){var n;n=e(this.element);this.data=e.data(this);e.data(this,"direction","previous");t===void 0&&(t=this.options.navigation.effect);return t==="fade"?this._fade():this._slide()};r.prototype.goto=function(t){var n,r;n=e(this.element);this.data=e.data(this);r===void 0&&(r=this.options.pagination.effect);t>this.data.total?t=this.data.total:t<1&&(t=1);if(typeof t=="number")return r==="fade"?this._fade(t):this._slide(t);if(typeof t=="string"){if(t==="first")return r==="fade"?this._fade(0):this._slide(0);if(t==="last")return r==="fade"?this._fade(this.data.total):this._slide(this.data.total)}};r.prototype._setuptouch=function(){var t,n,r,i;t=e(this.element);this.data=e.data(this);i=e(".slidesjs-control",t);n=this.data.current+1;r=this.data.current-1;r<0&&(r=this.data.total-1);n>this.data.total-1&&(n=0);i.children(":eq("+n+")").css({display:"block",left:this.options.width});return i.children(":eq("+r+")").css({display:"block",left:-this.options.width})};r.prototype._touchstart=function(t){var n,r;n=e(this.element);this.data=e.data(this);r=t.originalEvent.touches[0];this._setuptouch();e.data(this,"touchtimer",Number(new Date));e.data(this,"touchstartx",r.pageX);e.data(this,"touchstarty",r.pageY);return t.stopPropagation()};r.prototype._touchend=function(t){var n,r,i,s,o,u,a,f=this;n=e(this.element);this.data=e.data(this);u=t.originalEvent.touches[0];s=e(".slidesjs-control",n);if(s.position().left>this.options.width*.5||s.position().left>this.options.width*.1&&Number(new Date)-this.data.touchtimer<250){e.data(this,"direction","previous");this._slide()}else if(s.position().left<-(this.options.width*.5)||s.position().left<-(this.options.width*.1)&&Number(new Date)-this.data.touchtimer<250){e.data(this,"direction","next");this._slide()}else{i=this.data.vendorPrefix;a=i+"Transform";r=i+"TransitionDuration";o=i+"TransitionTimingFunction";s[0].style[a]="translateX(0px)";s[0].style[r]=this.options.effect.slide.speed*.85+"ms"}s.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){i=f.data.vendorPrefix;a=i+"Transform";r=i+"TransitionDuration";o=i+"TransitionTimingFunction";s[0].style[a]="";s[0].style[r]="";return s[0].style[o]=""});return t.stopPropagation()};r.prototype._touchmove=function(t){var n,r,i,s,o;n=e(this.element);this.data=e.data(this);s=t.originalEvent.touches[0];r=this.data.vendorPrefix;i=e(".slidesjs-control",n);o=r+"Transform";e.data(this,"scrolling",Math.abs(s.pageX-this.data.touchstartx)<Math.abs(s.pageY-this.data.touchstarty));if(!this.data.animating&&!this.data.scrolling){t.preventDefault();this._setuptouch();i[0].style[o]="translateX("+(s.pageX-this.data.touchstartx)+"px)"}return t.stopPropagation()};r.prototype.play=function(t){var n,r,i,s=this;n=e(this.element);this.data=e.data(this);if(!this.data.playInterval){if(t){r=this.data.current;this.data.direction="next";this.options.play.effect==="fade"?this._fade():this._slide()}e.data(this,"playInterval",setInterval(function(){r=s.data.current;s.data.direction="next";return s.options.play.effect==="fade"?s._fade():s._slide()},this.options.play.interval));i=e(".slidesjs-container",n);if(this.options.play.pauseOnHover){i.unbind();i.bind("mouseenter",function(){return s.stop()});i.bind("mouseleave",function(){return s.options.play.restartDelay?e.data(s,"restartDelay",setTimeout(function(){return s.play(!0)},s.options.play.restartDelay)):s.play()})}e.data(this,"playing",!0);e(".slidesjs-play",n).addClass("slidesjs-playing");if(this.options.play.swap){e(".slidesjs-play",n).hide();return e(".slidesjs-stop",n).show()}}};r.prototype.stop=function(t){var n;n=e(this.element);this.data=e.data(this);clearInterval(this.data.playInterval);this.options.play.pauseOnHover&&t&&e(".slidesjs-container",n).unbind();e.data(this,"playInterval",null);e.data(this,"playing",!1);e(".slidesjs-play",n).removeClass("slidesjs-playing");if(this.options.play.swap){e(".slidesjs-stop",n).hide();return e(".slidesjs-play",n).show()}};r.prototype._slide=function(t){var n,r,i,s,o,u,a,f,l,c,h=this;n=e(this.element);this.data=e.data(this);if(!this.data.animating&&t!==this.data.current+1){e.data(this,"animating",!0);r=this.data.current;if(t>-1){t-=1;c=t>r?1:-1;i=t>r?-this.options.width:this.options.width;o=t}else{c=this.data.direction==="next"?1:-1;i=this.data.direction==="next"?-this.options.width:this.options.width;o=r+c}o===-1&&(o=this.data.total-1);o===this.data.total&&(o=0);this._setActive(o);a=e(".slidesjs-control",n);t>-1&&a.children(":not(:eq("+r+"))").css({display:"none",left:0});a.children(":eq("+o+")").css({display:"block",left:c*this.options.width});this.options.callback.start(r+1);if(this.data.vendorPrefix){u=this.data.vendorPrefix;l=u+"Transform";s=u+"TransitionDuration";f=u+"TransitionTimingFunction";a[0].style[l]="translateX("+i+"px)";a[0].style[s]=this.options.effect.slide.speed+"ms";return a.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){a[0].style[l]="";a[0].style[s]="";a.children(":eq("+o+")").css({left:0});a.children(":eq("+r+")").css({display:"none",left:0});e.data(h,"current",o);e.data(h,"animating",!1);a.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");a.children(":not(:eq("+o+"))").css({display:"none",left:0});h.data.touch&&h._setuptouch();return h.options.callback.complete(o+1)})}return a.stop().animate({left:i},this.options.effect.slide.speed,function(){a.css({left:0});a.children(":eq("+o+")").css({left:0});return a.children(":eq("+r+")").css({display:"none",left:0},e.data(h,"current",o),e.data(h,"animating",!1),h.options.callback.complete(o+1))})}};r.prototype._fade=function(t){var n,r,i,s,o,u=this;n=e(this.element);this.data=e.data(this);if(!this.data.animating&&t!==this.data.current+1){e.data(this,"animating",!0);r=this.data.current;if(t){t-=1;o=t>r?1:-1;i=t}else{o=this.data.direction==="next"?1:-1;i=r+o}i===-1&&(i=this.data.total-1);i===this.data.total&&(i=0);this._setActive(i);s=e(".slidesjs-control",n);s.children(":eq("+i+")").css({display:"none",left:0});this.options.callback.start(r+1);if(this.options.effect.fade.crossfade){s.children(":eq("+this.data.current+")").stop().fadeOut(this.options.effect.fade.speed);return s.children(":eq("+i+")").stop().fadeIn(this.options.effect.fade.speed,function(){s.children(":eq("+i+")").css({});e.data(u,"animating",!1);e.data(u,"current",i);return u.options.callback.complete(i+1)})}return s.children(":eq("+r+")").stop().fadeOut(this.options.effect.fade.speed,function(){s.children(":eq("+i+")").stop().fadeIn(u.options.effect.fade.speed,function(){return s.children(":eq("+i+")").css({})});e.data(u,"animating",!1);e.data(u,"current",i);return u.options.callback.complete(i+1)})}};r.prototype._getVendorPrefix=function(){var e,t,r,i,s;e=n.body||n.documentElement;r=e.style;i="transition";s=["Moz","Webkit","Khtml","O","ms"];i=i.charAt(0).toUpperCase()+i.substr(1);t=0;while(t<s.length){if(typeof r[s[t]+i]=="string")return s[t];t++}return!1};return e.fn[s]=function(t){return this.each(function(){if(!e.data(this,"plugin_"+s))return e.data(this,"plugin_"+s,new r(this,t))})}})(jQuery,window,document)}).call(this);

幻灯片的 Javascript

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

导航的 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"-->

用于导航的 CSS

#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;

}

用于导航的 Javascript

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);
        }
    }
}); 

});
4

0 回答 0