UL和菜单项

Question

我试图让我的ul for MAINTENANCE显示并在我的css样式表中指定了类来引用我知道那里的工作在其他地方使用但是由于某种原因我的MAINTENANCE子菜单没有显示任何想法？

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
  $.fn.superfish = function(op){

    var sf = $.fn.superfish,
        c = sf.c,
        $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
        over = function(){
          var $$ = $(this), menu = getMenu($$);
          clearTimeout(menu.sfTimer);
          $$.showSuperfishUl().siblings().hideSuperfishUl();
        },
        out = function(){
          var $$ = $(this), menu = getMenu($$), o = sf.op;
          clearTimeout(menu.sfTimer);
          menu.sfTimer=setTimeout(function(){
            o.retainPath=($.inArray($$[0],o.$path)>-1);
            $$.hideSuperfishUl();
            if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
          },o.delay);	
        },
        getMenu = function($menu){
          var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
          sf.op = sf.o[menu.serial];
          return menu;
        },
        addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

    return this.each(function() {
      var s = this.serial = sf.o.length;
      var o = $.extend({},sf.defaults,op);
      o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
        $(this).addClass([o.hoverClass,c.bcClass].join(' '))
        .filter('li:has(ul)').removeClass(o.pathClass);
      });
      sf.o[s] = sf.op = o;

      $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
        if (o.autoArrows) addArrow( $('>a:first-child',this) );
      })
      .not('.'+c.bcClass)
      .hideSuperfishUl();

      var $a = $('a',this);
      $a.each(function(i){
        var $li = $a.eq(i).parents('li');
      });
      o.onInit.call(this);

    }).each(function() {
      var menuClasses = [c.menuClass];
      if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
      $(this).addClass(menuClasses.join(' '));
    });
  };

  var sf = $.fn.superfish;
  sf.o = [];
  sf.op = {};
  sf.IE7fix = function(){
    var o = sf.op;
    if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
      this.toggleClass(sf.c.shadowClass+'-off');
  };
  sf.c = {
    bcClass     : 'sf-breadcrumb',
    menuClass   : 'sf-js-enabled',
    anchorClass : 'sf-with-ul',
    arrowClass  : 'sf-sub-indicator',
    shadowClass : 'sf-shadow'
  };
  sf.defaults = {
    hoverClass	: 'sfHover',
    pathClass	: 'overideThisToUse',
    pathLevels	: 2,
    delay		: 1000,
    animation	: {height:'show'},
    speed		: 'normal',
    autoArrows	: true,
    dropShadows : false,
    disableHI	: false,		// true disables hoverIntent detection
    onInit		: function(){}, // callback functions
    onBeforeShow: function(){},
    onShow		: function(){},
    onHide		: function(){}
  };
  $.fn.extend({
    hideSuperfishUl : function(){
      var o = sf.op,
          not = (o.retainPath===true) ? o.$path : '';
      o.retainPath = false;
      var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
      .find('>ul').hide();
      o.onHide.call($ul);
      return this;
    },
    showSuperfishUl : function(){
      var o = sf.op,
          sh = sf.c.shadowClass+'-off',
          $ul = this.not('.accorChild').addClass(o.hoverClass)
      .find('>ul:hidden');
      sf.IE7fix.call($ul);
      o.onBeforeShow.call($ul);
      $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
      return this;
    }
  });

})(jQuery);
/*---------------------*/
$(function(){
  $('.sf-menu').superfish()
})

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-menu {
  line-height: 1.0;
}
.sf-menu ul li {
  width: 236px;
}
.sf-menu li:hover {
  visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
  float: left;
  position: relative;
}
.sf-menu a {
  display: block;
  position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  left: -22px;
  top: 39px; /* match top ul list item height */
  z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 10em; /* match ul width */
  top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 10em; /* match ul width */
  top: 0;
}

/*** STYLIZATION ***/
.sf-menu > li {
  margin: 0 13px 0 14px;
  margin-top:18px;
  margin-bottom:19px;
}
.sf-menu > li:first-child {
  margin-left:3px;
}
.sf-menu > li > a {
  font: 700 16px/20px 'Open Sans', sans-serif;
  color: #757474;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.sf-menu > li > a:hover, .sf-menu > li.active > a, .sf-menu > li.sfHover > a {
  color: #242424;
}
.sf-menu ul {
  position: absolute;
  top: -999em;
  width: 238px;
  padding: 0;
}
.sf-menu li li a {
  font: 11px/27px Arial, sans-serif;
  color: #2e2e2e;
  padding: 0 12px;
  text-transform: uppercase;
  background: #efefef !important;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
.sf-menu  li li a:hover, .sf-menu > li li.active a, .sf-menu > li li.sfHover > a {
  color: #e5e5e5;
  background: #2c2c2c !important;
  border-bottom: 1px solid #2c2c2c;
  border-left: 1px solid #2c2c2c;
  border-right: 1px solid #2c2c2c;
}

.sf-sub-indicator {
  display:none;
}

/* MEDIA
========================================================================= */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
@media only screen and (max-width: 767px) {
  .sf-menu{float:none;}
  .sf-menu ul,.sf-menu ul ul {min-width:100%;position: relative; left: 0 !important; top:0px !important; padding:0;background:none;}
  .sf-menu li {float:none; margin:0;}
  .sf-menu li:first-child {
    margin-left:0;
  }

  .sf-menu li a {
    line-height:54px;
    padding:0 22px;
  }
  .sf-menu > li {
    background: url('../images/480-bg-1.png') repeat-x;
  }
  .sf-menu > li+li {
    background: url('../images/480-bg-2.png') repeat-x;
  }
  .sf-menu > li+li+li {
    background: #fafafa url('../images/480-bg-3.png') repeat-x;
  }
  .sf-menu > li+li+li+li {
    background: #ebebeb url('../images/480-bg-4.png') repeat-x;
  }
  .sf-menu > li+li+li+li+li {
    background: #cccccc url('../images/480-bg-5.png') repeat-x;
  }
  .sf-menu > li+li+li+li+li+li {
    background: #bebebe url('../images/480-bg-6.png') repeat-x;
  }
  .sf-menu li li {
    width:100%;
  }
  .sf-menu  li li a:hover, .sf-menu > li li.active a, .sf-menu > li li.sfHover a {
    border-left:none;
    border-right:none;
  }
  .sf-menu li li a {
    font-size:12px;
    line-height:30px;
    padding-left:40px;
    border-left:none;
    border-right:none;
  }
  div.row-2 {
    background:none;
  }
  .sf-sub-indicator {
    text-indent: -999em;
    width: 3px;
    height: 6px;
    display:inline-block;
    background: url('../images/sf-sub-indicator.png') no-repeat;
    position:relative;
    left:6px;
    top:24px;
  }
  .sf-menu > li > a:hover .sf-sub-indicator, .sf-menu > li.active > a .sf-sub-indicator, .sf-menu > li.sfHover > a .sf-sub-indicator {
    background: url('../images/sf-sub-indicator.png') no-repeat 0 -6px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

<!-- start menu -->
<nav>
  <ul class="sf-menu sf-js-enabled">
    <li class="active"><a href="index.html">HOME</a></li>
    <li><a href="index-1.html">About</a></li>
    <li class=""><a class="sf-with-ul" href="index-2.html">MAINTENANCE
      <span class="sf-sub-indicator"> »</span></a>
      <ul style="display: none;">
        <li><a href="#">- Complete Computer Diagnostics</a></li>
        <li><a href="#">- Complete Safety Analysis</a></li>
        <li><a href="#">- Drivability Problems</a></li>
        <li><a href="#">- Tune-ups</a></li>
        <li><a href="#">- Oil Changes</a></li>
      </ul>
    </li>
    <li><a href="index-3.html">REPAIR</a></li>
    <li><a href="index-4.html">PRICE LIST</a></li>
    <li><a href="index-5.html">LOCATIONS</a></li>
  </ul>
  <div class="clear"></div>
</nav>
<!-- end menu -->

Answer 1

该行

<ul style="display: none;">

会使这个对象“不可见”。尝试用

替换它

<ul>

您还可以使用Javascript来“切换”项目是否可见。