Dropdown menus don't work
The dropdown menu on the site stopped working correctly. Submenus are no longer closed. Can anyone untangle this mess?
This is the website address; https://www.wideboards.com
The menu code looks like this:
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 »</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 »</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 »</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 »</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»</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 »</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 »</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»</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> »</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> »</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>
source to share
and congratulates on this achievement in 1999.
I looked at your code and did an alternative css (and dropped the javascript), but you'll need it for your google translate element - I haven't added it)
Take a look at the snippet. It could be refined by adding classes .parent
to your top ul groups. Basically what I did is put all your grouped elements in ul
, close any top elements that have closed tags <li>
, and add some css (not much needed, but as I said, you can add more if you like ).
Hope this helps.
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 »</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 »</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 »</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 »</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»</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 »</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 »</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»</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> »</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> »</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>
Here's a jsfiddle here and a new one here where I added in some classes (but didn't add additional styling to them) - if you want you can add additional styling to the css and you have more control with classes / IDs. It was difficult to keep track of all the menus in HTML, so sorry if the naming order is inconsistent (but as I said, no additional styling has been added to the classes, so this won't make a difference. For now, anyway).
source to share