下拉菜单不起作用

Question

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

这是网站地址; 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> 

Answer 1

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

我检查了你的代码，并制作了替代css（并删除了javascript - 但你需要它为你的谷歌翻译元素 - 我没有把它放入）

看一下片段。 可以通过.parent部ul组添加.parent类来改进它。 基本上我所做的是将所有的分组元素放在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和一个新的 ，我已经添加了一些类（但没有为它们添加额外的样式） - 如果你想要你可以为css添加额外的样式，你将有更多的控制使用类/ ID。 很难跟踪HTML中的所有菜单，如果命名顺序不一致就很难道歉（但就像我说的那样，没有额外的样式添加到类中，因此它不会产生任何影响..但是，无论如何）。