个人中心
gpt4 book ai didi

javascript - 下拉菜单不起作用

转载 作者：可可西里 更新时间：2023-11-01 13:22:09 25 4
gpt4 key购买 nike

站点上的下拉菜单已停止正常工作。子菜单不再关闭。谁能解开这个烂摊子？

这是网址； https://www.wideboards.com

菜单代码如下；

var expandFirstItemAutomatically = false;
var initMenuIdToExpand = false;
var expandMenuItemByUrl = true;


var initialMenuItemAlwaysExpanded = false;

var pete_slidedown_menuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if (navigator.userAgent.indexOf('Opera') >= 0) offsetOpera = 1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();

function TopMenusToShow() {
  var obj = divToScroll;
  var endArray = new Array();
  while (obj && obj.tagName != 'BODY') {
    if (obj.tagName == 'DIV' && obj.id.indexOf('slideDiv') >= 0) {
      var objFound = -1;
      for (var no = 0; no < otherDivsToScroll.length; no++) {
        if (otherDivsToScroll[no] == obj) {
          objFound = no;
        }
      }
      if (objFound >= 0) {
        otherDivsToScroll.splice(objFound, 0);
      }
    }
    obj = obj.parentNode;
  }
}

function showSubMenu(e, inputObj) {

  if (this && this.tagName) inputObj = this.parentNode;
  if (inputObj && inputObj.tagName == 'LI') {
    divToScroll = inputObj.getElementsByTagName('DIV')[0];
    for (var no = 0; no < otherDivsToScroll.length; no++) {
      if (otherDivsToScroll[no] == divToScroll) return;
    }
  }
  hidingInProcess = false;
  if (otherDivsToScroll.length > 0) {
    if (divToScroll) {
      if (otherDivsToScroll.length > 0) {
        popMenusToShow();
      }
      if (otherDivsToScroll.length > 0) {
        autoHideMenus();
        hidingInProcess = true;
      }
    }
  }
  if (divToScroll && !hidingInProcess) {
    divToScroll.style.display = '';
    otherDivsToScroll.length = 0;
    otherDivToScroll = divToScroll.parentNode;
    otherDivsToScroll.push(divToScroll);
    while (otherDivToScroll && otherDivToScroll.tagName != 'BODY') {
      if (otherDivToScroll.tagName == 'DIV' && otherDivToScroll.id.indexOf('slideDiv') >= 0) {
        otherDivsToScroll.push(otherDivToScroll);

      }
      otherDivToScroll = otherDivToScroll.parentNode;
    }
    ulToScroll = divToScroll.getElementsByTagName('UL')[0];
    if (divToScroll.style.height.replace('px', '') / 1 <= 1) scrollDownSub();
  }


}



function autoHideMenus() {
  if (otherDivsToScroll.length > 0) {
    divToHide = otherDivsToScroll[otherDivsToScroll.length - 1];
    parentDivToHide.length = 0;
    var obj = divToHide.parentNode.parentNode.parentNode;
    while (obj && obj.tagName == 'DIV') {
      if (obj.id.indexOf('slideDiv') >= 0) parentDivToHide.push(obj);
      obj = obj.parentNode.parentNode.parentNode;
    }
    var tmpHeight = (divToHide.style.height.replace('px', '') / 1 - slideMenuHeightOfCurrentBox);
    if (tmpHeight < 0) tmpHeight = 0;
    if (slideMenuHeightOfCurrentBox) divToHide.style.height = tmpHeight + 'px';
    ulToHide = divToHide.getElementsByTagName('UL')[0];
    slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
    scrollUpMenu();
  } else {
    slideMenuHeightOfCurrentBox = 0;
    showSubMenu();
  }
}


function scrollUpMenu() {

  var height = divToHide.offsetHeight;
  height -= 15;
  if (height < 0) height = 0;
  divToHide.style.height = height + 'px';

  for (var no = 0; no < parentDivToHide.length; no++) {
    parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
  }
  if (height > 0) {
    setTimeout('scrollUpMenu()', 5);
  } else {
    divToHide.style.display = 'none';
    otherDivsToScroll.length = otherDivsToScroll.length - 1;
    autoHideMenus();
  }
}

function scrollDownSub() {
  if (divToScroll) {
    var height = divToScroll.offsetHeight / 1;
    var offsetMove = Math.min(15, (ulToScroll.offsetHeight - height));
    height = height + offsetMove;
    divToScroll.style.height = height + 'px';

    for (var no = 1; no < otherDivsToScroll.length; no++) {
      var tmpHeight = otherDivsToScroll[no].offsetHeight / 1 + offsetMove;
      otherDivsToScroll[no].style.height = tmpHeight + 'px';
    }
    if (height < ulToScroll.offsetHeight) setTimeout('scrollDownSub()', 5);
    else {
      divToScroll = false;
      ulToScroll = false;
      if (objectsToExpand.length > 0 && initExpandIndex < (objectsToExpand.length - 1)) {
        initExpandIndex++;

        showSubMenu(false, objectsToExpand[initExpandIndex]);
      }
    }
  }
}

function initSubItems(inputObj, currentDepth) {
  divCounter++;
  var div = document.createElement('DIV');
  div.style.overflow = 'hidden';
  div.style.position = 'relative';
  div.style.display = 'none';
  div.style.height = '1px';
  div.id = 'slideDiv' + divCounter;
  div.className = 'slideMenuDiv' + currentDepth;
  inputObj.parentNode.appendChild(div);
  div.appendChild(inputObj);
  var menuItem = inputObj.getElementsByTagName('LI')[0];
  while (menuItem) {
    if (menuItem.tagName == 'LI') {
      var aTag = menuItem.getElementsByTagName('A')[0];
      aTag.className = 'slMenuItem_depth' + currentDepth;
      var subUl = menuItem.getElementsByTagName('UL');
      if (subUl.length > 0) {
        initSubItems(subUl[0], currentDepth + 1);
      }
      aTag.onclick = showSubMenu;
    }
    menuItem = menuItem.nextSibling;
  }
}

function initSlideDownMenu() {
  pete_slmenuObj = document.getElementById('pete_slidedown_menu');
  pete_slmenuObj.style.visibility = 'visible';
  var mainUl = pete_slmenuObj.getElementsByTagName('UL')[0];
  var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
  mainItemCounter = 1;
  while (mainMenuItem) {
    if (mainMenuItem.tagName == 'LI') {
      var aTag = mainMenuItem.getElementsByTagName('A')[0];
      aTag.className = 'slMenuItem_depth1';
      var subUl = mainMenuItem.getElementsByTagName('UL');
      if (subUl.length > 0) {
        mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
        initSubItems(subUl[0], 2);
        aTag.onclick = showSubMenu;
        mainItemCounter++;
      }
    }
    mainMenuItem = mainMenuItem.nextSibling;
  }

  if (location.search.indexOf('mainMenuItemToSlide') >= 0) {
    var items = location.search.split('&');
    for (var no = 0; no < items.length; no++) {
      if (items[no].indexOf('mainMenuItemToSlide') >= 0) {
        values = items[no].split('=');
        showSubMenu(false, document.getElementById('mainMenuItem' + values[1]));
        initMenuIdToExpand = false;
      }
    }
  } else if (expandFirstItemAutomatically > 0) {
    if (document.getElementById('mainMenuItem' + expandFirstItemAutomatically)) {
      showSubMenu(false, document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
      initMenuIdToExpand = false;
    }
  }

  if (expandMenuItemByUrl) {
    var aTags = pete_slmenuObj.getElementsByTagName('A');
    for (var no = 0; no < aTags.length; no++) {
      var hrefToCheckOn = aTags[no].href;
      if (location.href.indexOf(hrefToCheckOn) >= 0 && hrefToCheckOn.indexOf('#') < hrefToCheckOn.length - 1) {
        initMenuIdToExpand = false;
        var obj = aTags[no].parentNode;
        while (obj && obj.id != 'pete_slidedown_menu') {
          if (obj.tagName == 'LI') {
            var subUl = obj.getElementsByTagName('UL');
            if (initialMenuItemAlwaysExpanded) alwaysExpanedItems[obj.parentNode] = true;
            if (subUl.length > 0) {
              objectsToExpand.unshift(obj);
            }
          }
          obj = obj.parentNode;
        }
        showSubMenu(false, objectsToExpand[0]);
        break;
      }
    }
  }

  if (initMenuIdToExpand) {
    objectsToExpand = new Array();
    var obj = document.getElementById(initMenuIdToExpand)
    while (obj && obj.id != 'pete_slidedown_menu') {
      if (obj.tagName == 'LI') {
        var subUl = obj.getElementsByTagName('UL');
        if (initialMenuItemAlwaysExpanded) alwaysExpanedItems[obj.parentNode] = true;
        if (subUl.length > 0) {
          objectsToExpand.unshift(obj);
        }
      }
      obj = obj.parentNode;
    }

    showSubMenu(false, objectsToExpand[0]);

  }



}
window.onload = initSlideDownMenu;
#pete_slidedown_menu {
  width: 230px;
}

#pete_slidedown_menu a {
  text-decoration: none;
  display: block;
  clear: both;
  width: 250px;
  padding-left: 0px;
  color: #000000;
}

#pete_slidedown_menu .slMenuItem_depth1 {
  margin-top: 1px;
  font-weight: bold;
  color: #000000;
}

#pete_slidedown_menu .slMenuItem_depth2 {
  margin-top: 1px;
  color: #000000;
}

#pete_slidedown_menu .slMenuItem_depth3 {
  margin-top: 1px;
  font-style: italic;
  color: #000000;
}

#pete_slidedown_menu .slMenuItem_depth4 {
  margin-top: 1px;
  color: #000000
}

#pete_slidedown_menu .slMenuItem_depth5 {
  margin-top: 1px;
}

#pete_slidedown_menu .slideMenuDiv1 ul {
  padding: 1px;
}

#pete_slidedown_menu .slideMenuDiv2 ul {
  margin-left: 5px;
  padding: 1px;
}

#pete_slidedown_menu .slideMenuDiv3 ul {
  margin-left: 10px;
  padding: 1px;
}

#pete_slidedown_menu .slMenuItem_depth4 ul {
  margin-left: 15px;
  padding: 1px;
}

.style1 {
  font-size: 24px;
  font-weight: bold;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}
<div id="google_translate_element"></div>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<a style="padding-left:25px; color:#008000;;" href="http://www.wideboards.com/Blog">
  <font size="4">Hardwood Blog</font>
</a>
<br /><br /><br>
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:wideboards?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: none;" width="124" height="52" alt="Skype Me™!" /></a> <br>

<div id="pete_slidedown_menu">
  <!--Jobs -->
  <ul>
    <li><a href="#">Jobs</a>
      <ul>
        <li><a href="httpdocs/No%20Job%20vacancy.php">Personal Assistant</a></li>
        <li><a href="httpdocs/No%20Job%20vacancy.php">Craftsmen</a></li>
        <li><a href="httpdocs/No%20Job%20vacancy.php">Learners</a></li>
        <li><a href="httpdocs/No%20Job%20vacancy.php"> Marketing / Computer Data 
              / Webpage-build Specialist</a></li>
        <li><a href="http://www.wideboards.com/Application_Form.php"> Application Form</a>
        </li>
      </ul>
    </li>
  </ul>
  <!-- End of Group -->
  <!-- Recent Works -->
  <ul>
    <li><a href="#"><strong>Recent Works</strong></a>
      <ul>
        <li><a href="recentworks.php">Sycamore Sea</a></li>
        <li><a href="Ash_Sunburst.php">Ash Sunburst</a></li>
        <li><a href="recentworks.php">Huge Medallion</a></li>
        <li><a href="recentworks.php">American Black Walnut</a></li>
        <li><a href="recentworks.php">Maple Star Design</a></li>
        <li><a href="recentworks.php">Handworked Sunburst</a></li>
        <li><a href="recentworks.php">Handworked Oak Boards</a></li>
        <li><a href="recentworks.php">Panelling Refinished</a></li>
      </ul>
    </li>
  </ul>
  <!-- End of Group -->
  <!-- Parquet -->
  <ul>

    <li><a href="#"><strong>Parquet</strong></a>
      <ul>
        <li><a href="http://www.wideboards.com/What is Parquet.php">What is Parquet</a></li>
        <li><a href="http://www.wideboards.com/Parquet.php">Parquet </a> </li>
        <li><a href="http://www.wideboards.com/Oak_Quarter_sawn.php">Quarter Sawn 
              Oak</a></li>
        <!--Sub Group-->
        <li><a href="#">Basketweave &raquo;</a>
          <ul>
            <li><a href="http://www.wideboards.com/Basketweave.php">Basketweave</a></li>
            <li><a href="http://www.wideboards.com/Basketweave2.php">Basketweave2</a></li>
          </ul>
        </li>
        <!-- End Sub Group -->
        <!-- Sub Group -->
        <li><a href="#">Panel Designs &raquo;</a>
          <ul>
            <li><a href="http://www.wideboards.com/Parquet_Panel_Designs.php">Parquet 
                  Panel Designs</a></li>
            <li><a href="http://www.wideboards.com/Parquet_Panel_Designs2.php">Parquet 
                  Panel Designs"</a></li>
          </ul>
        </li>
        <!-- End Sub Group -->
        <li><a href="http://www.wideboards.com/Herringbone.php">Herringbone</a></li>
        <!-- Sub Group -->
        <li><a href="#">Parquet Borders &raquo;</a>
          <ul>
            <li><a href="http://www.wideboards.com/Parquet_Border_designs.php">Parquet 
                  Borders</a></li>
            <li><a href="http://www.wideboards.com/Parquet_Border_designs_2.php">Parquet 
                  Borders 2</a></li>
          </ul>
        </li>
        <!-- End Sub Group -->
        <!-- Sub Group -->
        <li><a href="#">Photos &raquo;</a>
          <ul>
            <li><a href="http://www.wideboards.com/Parquet_Panel_Photos.php">Photos</a></li>
            <li><a href="http://www.wideboards.com/Parquet_Panel_Photos2.php">Photos2</a></li>
            <li><a href="http://www.wideboards.com/Parquet_Panel_Photos3.php">Photos3</a></li>
            <li><a href="http://www.wideboards.com/Parquet_Panel_Photos4.php">Photos4</a></li>
          </ul>
        </li>
        <!-- End Sub Group -->
      </ul>
    </li>
  </ul>
  <!-- End of First Group-->
  <!-- Marquetry -->

  <li><a href="#"><strong>Marquetry</strong></a>
    <ul>
      <li><a href="http://www.wideboards.com/Marquetry.php">What is Marquetry</a></li>
      <!-- Sub Group -->
      <li><a href="#">St. Petersburg&raquo;</a>
        <ul>
          <li><a href="St.Petersburg.php">Rooms</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_designs_2.php">Borders</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_designs_3.php">Medallions</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_Designs_4.php">Eng 
                  grain</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_Designs_4.php">Softwood 
                  </a></li>
        </ul>
      </li>
    </ul>
    <!-- End Sub Group -->
    <!-- Sub Group -->
    <ul>
      <li><a href="#">Design Drawings &raquo;</a>
        <ul>
          <li><a href="http://www.wideboards.com/Marquetry_designs.php">Design 
                  Drawings</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_designs_2.php">Design 
                  Drawings2</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_designs_3.php">Design 
                  Drawings3</a></li>
          <li><a href="http://www.wideboards.com/Marquetry_Designs_4.php">Design 
                  Drawings4</a></li>
        </ul>
      </li>
      <!-- End Sub Group -->
      <!-- Sub Group -->
      <li><a href="#">Marquetry Borders &raquo;</a>
        <ul>
          <li><a href="http://www.wideboards.com/Marquetry_Border_designs.php">Marquetry 
                  Borders</a></li>
          <li><a href="httpdocs/Marquetry_Border_designs_2.php">Marquetry Borders2</a></li>
          <li><a href="httpdocs/St.Petersburg_marquetry_borders.php">St. Petersburg 
                  Borders2</a></li>
        </ul>
      </li>
      <!-- End Sub Group -->
      <!-- Sub Group -->
      <li><a href="#">Marquetry Examples&raquo;</a>
        <ul>
          <li><a href="recentworks.php">Sycamore Sea </a></li>
          <li><a href="http://picasaweb.google.co.uk/wideboards/AshParquetSunburstCircularFloor#">Ash 
                  Sunburst</a></li>
          <li><a href="httpdocs/St.Petersburg_marquetry_borders.php">St. Petersburg 
                  Borders2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <!-- End of Group -->
  <!-- Strips -->

  <li><a href="#"><strong>Strips</strong></a>
    <ul>
      <li><a href="http://www.wideboards.com/Ash_boards.php">Ash</a></li>
      <li><a href="http://www.wideboards.com/Beech_Boards.php">Beech</a></li>
      <li><a href="http://www.wideboards.com/Elm_Boards.php">Elm</a></li>
      <li><a href="http://www.wideboards.com/Jatoba_Boards.php">Jatoba</a></li>
      <li><a href="http://www.wideboards.com/Maple_Boards.php">Maple</a></li>
      <li><a href="http://www.wideboards.com/Boards.php">Oak</a></li>
      <li><a href="http://www.wideboards.com/Yet_More_Boards.php">Walnut</a></li>
    </ul>
  </li>

  <!-- End of Group -->
  <!-- Boards -->

  <li><a href="#"><strong>Boards</strong></a>
    <ul>
      <li><a href="http://www.wideboards.com/Oak_Board_Prices.htm">Prices-Oak 
              Boards</a></li>
      <li><a href="http://www.wideboards.com/Yet_More_Boards_4.php#Ash">Ash</a></li>
      <li><a href="http://www.wideboards.com/Beech_Boards.php">Beech</a></li>
      <li><a href="http://www.wideboards.com/Yet_More_Boards_4.php#Blackbean">Blackbean</a></li>
      <li><a href="http://www.wideboards.com/Brown_Oak_boards.php">Brown Oak</a></li>
      <li><a href="http://www.wideboards.com/Elm_Boards.php">Elm</a></li>
      <li><a href="http://www.wideboards.com/Jatoba_Boards.php">Jatoba</a></li>
      <li><a href="Yet_More_Boards_3.php">Lacewood</a></li>
      <li><a href="mesquite.php">Mesquite</a></li>
      <!-- New Sub Group -->


      <li><a href="#"><strong>Oak</strong> &raquo;</a>
        <ul>
          <li><a href="http://www.wideboards.com/Boards.php">Oak</a></li>
          <li><a href="http://www.wideboards.com/widewideboards.php">Very Wide 
                  Oak Boards</a></li>
          <li><a href="http://www.wideboards.com/wideboards-in-Tunbridge-Wells.php">Very 
                  Wide Oak Boards in Kent</a></li>
          <li><a href="http://www.wideboards.com/wideboards-in-chicago.php">Very 
                  Wide Oak Boards in Chicago</a></li>
          <li><a href="Wideboards_in_Cotswolds.php">Very Wide Oak Boards in 
                  Cotswolds</a></li>
          <li><a href="http://www.wideboards.com/castleoak.php">Barn Oak Boards</a></li>
          <li><a href="http://www.wideboards.com/Country_Oak_Boards_1.php">Country 
                  Oak</a></li>
          <li><a href="Oak_Kilbees.php">15th Century Cottage </a></li>
        </ul>
      </li>
      <!-- End of Sub Group -->
      <!-- New Sub Group -->

      <li><a href="#"><strong>Walnut</strong> &raquo;</a>
        <ul>
          <li><a href="http://www.wideboards.com/Yet_More_Boards.php">American 
                  Black Walnut</a></li>
          <li><a href="AmericanWalnutPrices.php"> Prices American Black Walnut</a></li>
          <li><a href="http://www.wideboards.com/French_Walnut.php">French Walnut</a></li>
        </ul>
      </li>
      <!-- End of Sub Group -->

      <!-- End of Group -->
      <!-- Logs -->
      <li><a href="#"><strong>Logs</strong></a>
        <ul>
          <li><a href="http://www.wideboards.com/widelogs.php">Wide Logs</a></li>
          <li><a href="httpdocs/widelogs2.php">More Logs</a></li>
          <li><a href="http://www.wideboards.com/widelogs3.php">Yet More Logs</a></li>
        </ul>
      </li>
      <!-- End of Group -->
      <!-- Ancient Floors -->
      <li><a href="#"><strong>Ancient Floors</strong></a>
        <ul>
          <li><a href="http://www.wideboards.com/Antique_Floors.php">Antique Floors</a></li>
        </ul>
        <ul>
          <li><a href="http://www.wideboards.com/Antique_Floors_Adams_Antiques.php">Antique Floors 2</a></li>
        </ul>
      </li>
      <!-- End of Group -->
      <!-- Woodblocks -->
      <li><a href="#"><strong>Woodblocks</strong></a>
        <ul>
          <li><a href="httpdocs/oak_and_iron.php">Oak</a></li>
          <li><a href="http://www.wideboards.com/end grain blocks.php">End Grain 
              Blocks</a></li>
        </ul>
      </li>
      <!-- End of Group -->
      <!--Restoration -->
      <li><a href="#"><strong>Restoration</strong></a>
        <ul>
          <li><a href="../Windsor.php">Windsor Castle</a></li>
          <li><a href="../Harewood.php">Harewood House</a></li>
          <li><a href="../Restorations.php">Parquet Restorations</a></li>
        </ul>
        <!-- End of Group -->
        <!-- Bad Jobs -->
        <li><a href="#"><strong>Bad Jobs</strong></a>
          <ul>
            <li><a href="http://www.wideboards.com/Badjob.php">Bad Jobs Generally 
              </a></li>
            <li><a href="http://www.wideboards.com/BadjobCotswolds.php">Bad Job Cotswold</a></li>
          </ul>
        </li>
        <!-- End of Sub Group -->
    </ul>
    <!-- End of Group -->
    <!-- Technical -->
    <li><a href="#"><strong>Technical</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Technical.php">Introduction</a></li>
      <li><a href="http://www.wideboards.com/Fixing methods.php">Fixing methods</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Choice of Timber">Timber 
          Choice</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Thickness">Thickness</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Wide Plank Flooring">Wide 
          Plank</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Storage of the timber">Storage</a></li>
      <li><a href="http://www.wideboards.com/Technical.php#expectations">Expectations</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Aclimatisation">Acclimatising</a></li>
      <li><a href="http://www.wideboards.com/Technical.php#Prep">Preparation</a></li>
      <li><a href="http://www.wideboards.com/Technical.php#Subfloors">Subfloors</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Shrinkage">Shrinkage 
          / Expansion</a></li>
      <li><a href="http://www.wideboards.com/underfloor_heating.php">Underfloor 
          Heating</a></li>
      <li><a href="http://www.wideboards.com/">Timbers</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Choice of Timber">Timber 
          Choice</a></li>
      <li><a href="http://www.wideboards.com/underfloor_heating.php">Types</a></li>
    </ul>

    <!-- End of Group -->
    <!-- Lacquers -->

    <li><a href="#"><strong>Lacquers</strong></a>
      <ul>
        <li><a href="#">Water based</a></li>
        <li><a href="#">Thinners based</a></li>
        <li><a href="#">Spirit based</a></li>
      </ul>
    </li>

    <!-- End of Group -->

</div>

最佳答案

并祝贺 1999 年取得这样的成就。

我检查了你的代码并制作了替代 css(并删除了 javascript - 但你的谷歌翻译元素需要它 - 我没有把它放进去)

看看这个片段。可以通过添加 .parent 对其进行细化类到您的上层 ul 组。基本上我所做的是将所有分组元素放在 ul 中, 关闭所有未关闭的顶部元素 <li>标签，并添加了一些 css(不需要很多，但就像我说的，如果你愿意，你可以添加更多)。

希望对您有所帮助。

ul li {
  font-weight: bold;
}

ul>ul li {
  font-weight: normal;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

ul>ul {
  display: none;
}

ul:hover>ul {
  display: block!important;
}
<div id="pete_slidedown_menu">
  <!--Jobs -->
  <ul>
    <li><a href="#">Jobs</a></li>
    <ul>
      <li><a href="httpdocs/No%20Job%20vacancy.php">Personal Assistant</a></li>
      <li><a href="httpdocs/No%20Job%20vacancy.php">Craftsmen</a></li>
      <li><a href="httpdocs/No%20Job%20vacancy.php">Learners</a></li>
      <li><a href="httpdocs/No%20Job%20vacancy.php"> Marketing / Computer Data 
              / Webpage-build Specialist</a></li>
      <li><a href="http://www.wideboards.com/Application_Form.php"> Application Form</a>
      </li>
    </ul>
  </ul>
  <!-- End of Group -->
  <!-- Recent Works -->
  <ul>
    <li><a href="#"><strong>Recent Works</strong></a></li>
    <ul>
      <li><a href="recentworks.php">Sycamore Sea</a></li>
      <li><a href="Ash_Sunburst.php">Ash Sunburst</a></li>
      <li><a href="recentworks.php">Huge Medallion</a></li>
      <li><a href="recentworks.php">American Black Walnut</a></li>
      <li><a href="recentworks.php">Maple Star Design</a></li>
      <li><a href="recentworks.php">Handworked Sunburst</a></li>
      <li><a href="recentworks.php">Handworked Oak Boards</a></li>
      <li><a href="recentworks.php">Panelling Refinished</a></li>
    </ul>
  </ul>
  <!-- End of Group -->
  <!-- Parquet -->
  <ul>

    <li><a href="#"><strong>Parquet</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/What is Parquet.php">What is Parquet</a></li>
      <li><a href="http://www.wideboards.com/Parquet.php">Parquet </a> </li>
      <li><a href="http://www.wideboards.com/Oak_Quarter_sawn.php">Quarter Sawn Oak</a></li>
      <ul>
        <!--Sub Group-->
        <li><a href="#">Basketweave &raquo;</a></li>
        <ul>
          <li><a href="http://www.wideboards.com/Basketweave.php">Basketweave</a></li>
          <li><a href="http://www.wideboards.com/Basketweave2.php">Basketweave2</a></li>
        </ul>
      </ul>
      <!-- End Sub Group -->
      <!-- Sub Group -->
      <ul>


        <li><a href="#">Panel Designs &raquo;</a></li>
        <ul>
          <li><a href="http://www.wideboards.com/Parquet_Panel_Designs.php">Parquet 
                  Panel Designs</a></li>
          <li><a href="http://www.wideboards.com/Parquet_Panel_Designs2.php">Parquet 
                  Panel Designs"</a></li>
        </ul>
      </ul>
      <!-- End Sub Group -->
      <li><a href="http://www.wideboards.com/Herringbone.php">Herringbone</a></li>
      <!-- Sub Group -->
      <li><a href="#">Parquet Borders &raquo;</a></li>
      <ul>
        <li><a href="http://www.wideboards.com/Parquet_Border_designs.php">Parquet 
                  Borders</a></li>
        <li><a href="http://www.wideboards.com/Parquet_Border_designs_2.php">Parquet 
                  Borders 2</a></li>
      </ul>

      <!-- End Sub Group -->
      <!-- Sub Group -->
      <ul>

        <li><a href="#">Photos &raquo;</a></li>
        <ul>

          <li><a href="http://www.wideboards.com/Parquet_Panel_Photos.php">Photos</a></li>
          <li><a href="http://www.wideboards.com/Parquet_Panel_Photos2.php">Photos2</a></li>
          <li><a href="http://www.wideboards.com/Parquet_Panel_Photos3.php">Photos3</a></li>
          <li><a href="http://www.wideboards.com/Parquet_Panel_Photos4.php">Photos4</a></li>
        </ul>
        <!-- End Sub Group -->
      </ul>
    </ul>
    <!-- End of First Group-->
    <!-- Marquetry -->

    <li><a href="#"><strong>Marquetry</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Marquetry.php">What is Marquetry</a></li>
      <ul>
        <!-- Sub Group -->
        <li><a href="#">St. Petersburg&raquo;</a></li>

        <li><a href="St.Petersburg.php">Rooms</a></li>
        <li><a href="http://www.wideboards.com/Marquetry_designs_2.php">Borders</a></li>
        <li><a href="http://www.wideboards.com/Marquetry_designs_3.php">Medallions</a></li>
        <li><a href="http://www.wideboards.com/Marquetry_Designs_4.php">Eng 
                  grain</a></li>
        <li><a href="http://www.wideboards.com/Marquetry_Designs_4.php">Softwood 
                  </a></li>
      </ul>
    </ul>
  </ul>


  <!-- End Sub Group -->
  <!-- Sub Group -->
  <ul>
    <li><a href="#">Design Drawings &raquo;</a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Marquetry_designs.php">Design 
                  Drawings</a></li>
      <li><a href="http://www.wideboards.com/Marquetry_designs_2.php">Design 
                  Drawings2</a></li>
      <li><a href="http://www.wideboards.com/Marquetry_designs_3.php">Design 
                  Drawings3</a></li>
      <li><a href="http://www.wideboards.com/Marquetry_Designs_4.php">Design 
                  Drawings4</a></li>
    </ul>

    <!-- End Sub Group -->
    <!-- Sub Group -->
    <ul>

      <li><a href="#">Marquetry Borders &raquo;</a></li>
      <ul>
        <li><a href="http://www.wideboards.com/Marquetry_Border_designs.php">Marquetry 
                  Borders</a></li>
        <li><a href="httpdocs/Marquetry_Border_designs_2.php">Marquetry Borders2</a></li>
        <li><a href="httpdocs/St.Petersburg_marquetry_borders.php">St. Petersburg  Borders2</a></li>
      </ul>

      <!-- End Sub Group -->
      <!-- Sub Group -->
      <li><a href="#">Marquetry Examples&raquo;</a></li>
      <ul>
        <li><a href="recentworks.php">Sycamore Sea </a></li>
        <li><a href="http://picasaweb.google.co.uk/wideboards/AshParquetSunburstCircularFloor#">Ash Sunburst</a></li>
        <li><a href="httpdocs/St.Petersburg_marquetry_borders.php">St. Petersburg  Borders2</a></li>
      </ul>

    </ul>

    <!-- End of Group -->
    <!-- Strips -->

    <li><a href="#"><strong>Strips</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Ash_boards.php">Ash</a></li>
      <li><a href="http://www.wideboards.com/Beech_Boards.php">Beech</a></li>
      <li><a href="http://www.wideboards.com/Elm_Boards.php">Elm</a></li>
      <li><a href="http://www.wideboards.com/Jatoba_Boards.php">Jatoba</a></li>
      <li><a href="http://www.wideboards.com/Maple_Boards.php">Maple</a></li>
      <li><a href="http://www.wideboards.com/Boards.php">Oak</a></li>
      <li><a href="http://www.wideboards.com/Yet_More_Boards.php">Walnut</a></li>
    </ul>


    <!-- End of Group -->
    <!-- Boards -->

    <li><a href="#"><strong>Boards</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Oak_Board_Prices.htm">Prices-Oak 
              Boards</a></li>
      <li><a href="http://www.wideboards.com/Yet_More_Boards_4.php#Ash">Ash</a></li>
      <li><a href="http://www.wideboards.com/Beech_Boards.php">Beech</a></li>
      <li><a href="http://www.wideboards.com/Yet_More_Boards_4.php#Blackbean">Blackbean</a></li>
      <li><a href="http://www.wideboards.com/Brown_Oak_boards.php">Brown Oak</a></li>
      <li><a href="http://www.wideboards.com/Elm_Boards.php">Elm</a></li>
      <li><a href="http://www.wideboards.com/Jatoba_Boards.php">Jatoba</a></li>
      <li><a href="Yet_More_Boards_3.php">Lacewood</a></li>
      <li><a href="mesquite.php">Mesquite</a></li>
      <!-- New Sub Group -->

    </ul>

    <li><a href="#"><strong>Oak</strong> &raquo;</a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Boards.php">Oak</a></li>
      <li><a href="http://www.wideboards.com/widewideboards.php">Very Wide 
                  Oak Boards</a></li>
      <li><a href="http://www.wideboards.com/wideboards-in-Tunbridge-Wells.php">Very 
                  Wide Oak Boards in Kent</a></li>
      <li><a href="http://www.wideboards.com/wideboards-in-chicago.php">Very 
                  Wide Oak Boards in Chicago</a></li>
      <li><a href="Wideboards_in_Cotswolds.php">Very Wide Oak Boards in 
                  Cotswolds</a></li>
      <li><a href="http://www.wideboards.com/castleoak.php">Barn Oak Boards</a></li>
      <li><a href="http://www.wideboards.com/Country_Oak_Boards_1.php">Country 
                  Oak</a></li>
      <li><a href="Oak_Kilbees.php">15th Century Cottage </a></li>
    </ul>

    <!-- End of Sub Group -->
    <!-- New Sub Group -->


    <li><a href="#"><strong>Walnut</strong> &raquo;</a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Yet_More_Boards.php">American 
                  Black Walnut</a></li>
      <li><a href="AmericanWalnutPrices.php"> Prices American Black Walnut</a></li>
      <li><a href="http://www.wideboards.com/French_Walnut.php">French Walnut</a></li>
    </ul>

    <!-- End of Sub Group -->

    <!-- End of Group -->
    <!-- Logs -->
    <li><a href="#"><strong>Logs</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/widelogs.php">Wide Logs</a></li>
      <li><a href="httpdocs/widelogs2.php">More Logs</a></li>
      <li><a href="http://www.wideboards.com/widelogs3.php">Yet More Logs</a></li>


      <!-- End of Group -->
      <!-- Ancient Floors -->

      <li><a href="#"><strong>Ancient Floors</strong></a></li>
      <ul>
        <li><a href="http://www.wideboards.com/Antique_Floors.php">Antique Floors</a></li>
      </ul>
      <ul>
        <li><a href="http://www.wideboards.com/Antique_Floors_Adams_Antiques.php">Antique Floors 2</a></li>
      </ul>

      <!-- End of Group -->
      <!-- Woodblocks -->
      <li><a href="#"><strong>Woodblocks</strong></a></li>
      <ul>
        <li><a href="httpdocs/oak_and_iron.php">Oak</a></li>
        <li><a href="http://www.wideboards.com/end grain blocks.php">End Grain 
              Blocks</a></li>
      </ul>

      <!-- End of Group -->
      <!--Restoration -->
      <li><a href="#"><strong>Restoration</strong></a></li>
      <ul>
        <li><a href="../Windsor.php">Windsor Castle</a></li>
        <li><a href="../Harewood.php">Harewood House</a></li>
        <li><a href="../Restorations.php">Parquet Restorations</a></li>
      </ul>
      <!-- End of Group -->
      <!-- Bad Jobs -->
      <li><a href="#"><strong>Bad Jobs</strong></a></li>
      <ul>
        <li><a href="http://www.wideboards.com/Badjob.php">Bad Jobs Generally 
              </a></li>
        <li><a href="http://www.wideboards.com/BadjobCotswolds.php">Bad Job Cotswold</a></li>
      </ul>

      <!-- End of Sub Group -->
    </ul>
    <!-- End of Group -->
    <!-- Technical -->
    <li><a href="#"><strong>Technical</strong></a></li>
    <ul>
      <li><a href="http://www.wideboards.com/Technical.php">Introduction</a></li>
      <li><a href="http://www.wideboards.com/Fixing methods.php">Fixing methods</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Choice of Timber">Timber 
          Choice</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Thickness">Thickness</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Wide Plank Flooring">Wide 
          Plank</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Storage of the timber">Storage</a></li>
      <li><a href="http://www.wideboards.com/Technical.php#expectations">Expectations</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Aclimatisation">Acclimatising</a></li>
      <li><a href="http://www.wideboards.com/Technical.php#Prep">Preparation</a></li>
      <li><a href="http://www.wideboards.com/Technical.php#Subfloors">Subfloors</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Shrinkage">Shrinkage 
          / Expansion</a></li>
      <li><a href="http://www.wideboards.com/underfloor_heating.php">Underfloor 
          Heating</a></li>
      <li><a href="http://www.wideboards.com/">Timbers</a></li>
      <li><a href="http://www.wideboards.com/Thick_or_Thin.php#Choice of Timber">Timber 
          Choice</a></li>
      <li><a href="http://www.wideboards.com/underfloor_heating.php">Types</a></li>
    </ul>

    <!-- End of Group -->
    <!-- Lacquers -->


    <li><a href="#"><strong>Lacquers</strong></a></li>
    <ul>
      <li><a href="#">Water based</a></li>
      <li><a href="#">Thinners based</a></li>
      <li><a href="#">Spirit based</a></li>
    </ul>
  </ul>


  <!-- End of Group -->
</div>

有一个 jsfiddle这里还有一个new one here我在其中添加了一些类(但没有向它们添加额外的样式)——如果您愿意，可以向 css 添加额外的样式，并且您将使用类/id 进行更多控制。很难跟踪 HTML 中的所有菜单，所以如果命名顺序不一致，我们深表歉意(但就像我说的，没有额外的样式被添加到类中，所以它不会有什么不同......无论如何)。

关于javascript - 下拉菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45255623/

25 4 0
文章推荐： .net - 什么是 ASP.NET 应用程序服务器？
文章推荐： php - 如何在 Wordpress 中更改 PHPSESSID cookie 域名？
文章推荐： php - 如何在 Laravel 中链接多个外键
文章推荐： c++ - CreateFile 能否返回 NULL？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com