Working on mobile css menu with plenty of frustration!

[sacdman]

Okay, so first I just want to say that I am by no means a coding expert. I can do some css but have not kept up with coding for quite some time. I do not do this by profession and only do it as a hobby and hoping someone here can help. My website was started back in 2002 and little has changed. I am using virtual includes currently for the menu on the right side of every page. My real trouble now is incorporating a css menu for cellphone users. This does not have to be the least bit fancy, just functional. I am not at all versed in advanced coding languages like php or MySQL and I am not able to make head or tail out of javascript.
I have tried to add several different types of css menus from various places on the web, all with varying levels of success, but ultimately, I do not have the skills. I am asking very kindly here to anyone who may wish to take a close look at my website and let me know if you think you can help me with adding some kind of menu for mobile devices. Basically, the CSS I have on my webpage usually collides with the css for the menus I have tried to add. Basically, it ruins the page.
If there is anyone who thinks they can help with adding a CSS menu with or without javascript, I would appreciate your time taking a closer look. Basically, I have reduced the HTML code for my sitemap page to make it shorter and easier to look over. The yellow marks are where, Ideally, I think the button to open the menu should go. This could be an off-canvas, a slidein or even a mega menu that would work on a cellphone. The website appears to be find on tablets. Again, I value your thoughts and appreciate any advice you could provide, signed, Amateur Coder, sacdman

First, this is the list of links. I have just to give you an idea of how many pages I have. I need to have these show up in a men for a mobile device. Function is more important than it being really pretty.

Menu<br />
<ul id="nav" class="class2">
<li><a href="index.html" title="Home Page">Home</a></li>
<li><a href="sitemap.html" title="Site Map with News &amp; Updates">Site Map</a></li>
<li><a href="links.html" title="Other Benny Hill Places Around The Web">Links</a></li>
<li><a href="fanreviews01.html" title="Read Benny Hill Reviews Submitted by Fans">Fan Reviews</a></li>
<li><a href="podcasts.html" title="Go to the Podcasts Page">Podcasts</a></li>
<li><a href="after.html" title="Go to the Angels after The Benny Hill Show">Angels after Benny Hill</a></li>
<li><a href="references.html" title="Go to the References to The Benny Hill Show on Other Programs">Benny Hill References</a></li>
<li><a href="about.html" title="Learn about the webmaster and the site history">About Me</a></li>
<li><a href="original01.html" title="Guide To The Original Series">Original Series</a><ul>
<li><a href="original01.html" title="Details For Episodes 1 - 11">1969 - 1971</a></li>
<li><a href="original02.html" title="Details For Episodes 12 - 21">1972 - 1974</a></li>
<li><a href="original03.html" title="Details For Episodes 22 - 31">1975 - 1977</a></li>
<li><a href="original04.html" title="Details For Episodes 32 - 41">1978 - 1981</a></li>
<li><a href="original05.html" title="Details For Episodes 42 - 50">1982 - 1985</a></li>
<li><a href="original06.html" title="Details For Episodes 51 - 58">1986 - 1989</a></li>
</ul></li>
<li><a href="guide01.html" title="Guide To The Syndicated Series">Syndicated Series</a><ul>
<li><a href="guide01.html" title="Details For Shows 1 - 20">Shows #1 - #20</a></li>
<li><a href="guide02.html" title="Details For Shows 21 - 40">Shows #21 - #40</a></li>
<li><a href="guide03.html" title="Details For Shows 41 - 60">Shows #41 - #60</a></li>
<li><a href="guide04.html" title="Details For Shows 61 - 80">Shows #61 - #80</a></li>
<li><a href="guide05.html" title="Details For Shows 81 - 100">Shows #81 - #100</a></li>
<li><a href="guide06.html" title="Details For Shows 101 - 109">Shows #101 - #111</a></li>
</ul></li>
<li><a href="music01.html" title="The Music of The Benny Hill Show">New: The Music</a><ul>
<li><a href="music01.html" title="Episodes 1 - 11 (1969-1971)">Episodes 1 - 11</a></li>
<li><a href="music02.html" title="Episodes 12 - 21 (1972-1974)">Episodes 12 - 21</a></li>
<li><a href="music03.html" title="Episodes 22 - 31 (1975-1977)">Episodes 22 - 31</a></li>
<li><a href="music04.html" title="Episodes 32 - 41 (1978-1981)">Episodes 32 - 41</a></li>
<li><a href="music05.html" title="Episodes 42 - 50 (1982-1985)">Episodes 42 - 50</a></li>
<li><a href="music06.html" title="Episodes 51 - 58 (1986-1989)">Episodes 51 - 58</a></li>
<li><a href="music07.html" title="Essay on Stock Music of The Benny Hill Show">Essay on Stock Music</a></li>
<li><a href="music08.html" title="The Musicians of The Benny Hill Show by William Brown">The Musicians</a></li>
<li><a href="music09.html" title="Album Reviews of Benny Hill Recordings">Album Reviews</a></li>
</ul></li>
<li><a href="gossamer.html" title="Hill's Angels 1979-1981">Hill's Angels 1979-1981</a><ul>
<li><a href="gossamer.html" title="Hot Gossamer (March 14, 1979)">Hot Gossamer</a></li>
<li><a href="panspeople.html" title="Pan's People (April 25, 1979)">Pan's People</a></li>
<li><a href="chezben.html" title="Chez Ben Grand Gala (February 6, 1980)">Chez Ben Grand Gala</a></li>
<li><a href="madame.html" title="Madame Louise Summer Collection (March 5, 1980)">Madame Louise...</a></li>
<li><a href="newyork.html" title="New York, New York (April 16, 1980)">New York, New York</a></li>
<li><a href="tvworkout.html" title="TV Workout 'Runaway' (January 7, 1981)">TV Workout</a></li>
<li><a href="ease.html" title="Ease On Down The Road (February 11, 1981)">Ease On Down The Road</a></li>
<li><a href="young.html" title="Keep Young and Beautiful (February 11, 1981)">Keep Young and Beautiful</a></li>
<li><a href="occasional.html" title="An Occasional Man (February 11, 1981)">An Occasional Man</a></li>
<li><a href="streetdance.html" title="Street Dance (March 25, 1981)">Street Dance</a></li>
</ul></li>
<li><a href="splendide.html" title="Hill's Angels 1982-1985">Hill's Angels 1982-1985</a><ul>
<li><a href="splendide.html" title="Hotel Splendide (January 6, 1982)">Hotel Splendide</a></li>
<li><a href="streetparty.html" title="Street Party (February 10, 1982)">Street Party</a></li>
<li><a href="striptease.html" title="Strip Tease (February 10, 1982)">Strip Tease</a></li>
<li><a href="cruise.html" title="The Cruise (January 5, 1983)">The Cruise</a></li>
<li><a href="godiva.html" title="Lady Godiva (The Wild West) (March 16, 1983)">Lady Godiva</a></li>
<li><a href="bizarre.html" title="Club Bizarre (January 16, 1984)">Club Bizarre</a></li>
<li><a href="workout.html" title="The Workout (April 25, 1984)">The Workout</a></li>
<li><a href="benitos.html" title="Sauce At Benito's (January 2,1985)">Sauce At Benito's</a></li>
<li><a href="oddball.html" title="Oddball's Club Cabaret (April 8,1985)">Oddball's Club Cabaret</a></li>
</ul></li>
<li><a href="faces01.html" title="The Faces Of Benny Hill">The Faces Of Benny Hill</a><ul>
<li><a href="faces01.html" title="1969 - 1970">Page 1</a></li>
<li><a href="faces02.html" title="1971 - 1972">Page 2</a></li>
<li><a href="faces03.html" title="1973 - 1974">Page 3</a></li>
<li><a href="faces04.html" title="1975 - 1976">Page 4</a></li>
<li><a href="faces05.html" title="1977 - 1978">Page 5</a></li>
<li><a href="faces06.html" title="1979 - 1980">Page 6</a></li>
<li><a href="faces07.html" title="1981 - 1982">Page 7</a></li>
<li><a href="faces08.html" title="1983 - 1984">Page 8</a></li>
<li><a href="faces09.html" title="1985 - 1986">Page 9</a></li>
<li><a href="faces10.html" title="1988 - 1991">Page 10</a></li>
</ul></li>
<li><a href="cast01.html" title="The Cast Of The Benny Hill Show">The Cast</a><ul>
<li><a href="cast01.html" title="The Cast Of The Benny Hill Show">Page 1</a></li>
</ul></li>
<li><a href="who01.html" title="The Who's Who of Hill's Angels">Who's Who of Hill's Angels</a><ul>
<li><a href="who01.html" title="Adams - Critcher">Page 1</a></li>
<li><a href="who02.html" title="Daly - Holmes">Page 2</a></li>
<li><a href="who03.html" title="Jackman - Miles">Page 3</a></li>
<li><a href="who04.html" title="Mortimer - Smith">Page 4</a></li>
<li><a href="who05.html" title="Spencer-Lane - Young">Page 5</a></li>
</ul></li>
<li><a href="compendium.html" title="The Hill's Angels Compendium">Angels Compendium</a><ul>
<li><a href="compendium.html" title="Details For Hill's Angels Appearances On The Show">Page 1</a></li>
<li><a href="compendium01.html" title="Details For Hill's Angels Appearances On The Show">Page 2</a></li>
</ul></li>
<li><a href="benny01.html" title="A Tribute To Benny Hill">Benny Hill Tribute</a><ul>
<li><a href="benny01.html" title="A Tribute To Benny Hill, Page 1">Page 1</a></li>
<li><a href="benny02.html" title="A Tribute To Benny Hill, Page 2">Page 2</a></li>
<li><a href="benny03.html" title="A Tribute To Benny Hill, Page 3">Page 3</a></li>
<li><a href="benny04.html" title="A Tribute To Benny Hill, Page 4">Page 4</a></li>
</ul></li>
<li><a href="mcgee.html" title="A Tribute To Henry McGee">More Tributes</a><ul>
<li><a href="mcgee.html" title="A Tribute To Henry McGee">Henry McGee Tribute</a></li>
<li><a href="jwright.html" title="A Tribute to Jackie Wright">Jackie Wright Tribute</a></li>
<li><a href="kirkland.html" title="A Tribute To Dennis Kirkland">Dennis Kirkland Tribute</a></li>
<li><a href="machine.html" title="A Tribute to Love Machine">Love Machine Tribute</a></li>
<li><a href="darvey.html" title="A Tribute To Diana Darvey">Diana Darvey Tribute</a></li>
<li><a href="btodd.html" title="A Tribute To Bob Todd">Bob Todd Tribute</a></li>
<li><a href="randolph.html" title="A Tribute To Boots Randolph">Boots Randolph Tribute</a></li>
<li><a href="python.html" title="Monty Python Connections by William Brown">Monty Python Connections</a></li>
</ul></li>
<li><a href="whoshow01.html" title="Who's Who Pages A - L">Who's Who A - L</a><ul>
<li><a href="whoshow01.html" title="Adair - Black">Page 1</a></li>
<li><a href="whoshow02.html" title="Bond - Cartwright">Page 2</a></li>
<li><a href="whoshow03.html" title="Chisholm - Dane">Page 3</a></li>
<li><a href="whoshow04.html" title="Darlington - Design">Page 4</a></li>
<li><a href="whoshow05.html" title="Doyle - Finch">Page 5</a></li>
<li><a href="whoshow06.html" title="Foot - Gallant">Page 6</a></li>
<li><a href="whoshow07.html" title="Gaye - Hamilton">Page 7</a></li>
<li><a href="whoshow08.html" title="Hare - Jobling">Page 8</a></li>
<li><a href="whoshow09.html" title="Johnstone - Kominowski">Page 9</a></li>
<li><a href="whoshow10.html" title="Ladybirds - Logan">Page 10</a></li>
<li><a href="whoshow11.html" title="Los Zafiros - Lynley">Page 11</a></li>
</ul></li>
<li><a href="whoshow12.html" title="Who's Who Pages M - Z">Who's Who M - Z</a><ul>
<li><a href="whoshow12.html" title="Mahadervan - Mills">Page 12</a></li>
<li><a href="whoshow13.html" title="Moray - Nolan">Page 13</a></li>
<li><a href="whoshow14.html" title="O'Dell - Parry">Page 14</a></li>
<li><a href="whoshow15.html" title="Parsons - Price">Page 15</a></li>
<li><a href="whoshow16.html" title="Prowse - Rickard">Page 16</a></li>
<li><a href="whoshow17.html" title="Roberts - Seal">Page 17</a></li>
<li><a href="whoshow18.html" title="Sedd - Stapley">Page 18</a></li>
<li><a href="whoshow19.html" title="Stephenson - Two's Company">Page 19</a></li>
<li><a href="whoshow20.html" title="Tyson - Weston">Page 20</a></li>
<li><a href="whoshow21.html" title="Whatling - Wright">Page 21</a></li>
</ul></li>
<li><a href="set01a.html" title="A&amp;E DVD Review, Set 1 (1969-1971)">A&amp;E DVD Review, Set 1</a><ul>
<li><a href="set01a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set01b.html" title="Reviews of Episodes 5 - 8">Episodes 5 - 8</a></li>
<li><a href="set01c.html" title="Reviews of Episodes 9-11 &amp; Summary">Episodes 9 - 11 &amp; Summary</a></li>
</ul></li>
<li><a href="set02a.html" title="A&amp;E DVD Review, Set 2 (1972-1974)">A&amp;E DVD Review, Set 2</a><ul>
<li><a href="set02a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set02b.html" title="Reviews of Episodes 5 - 8">Episodes 5 - 8</a></li>
<li><a href="set02c.html" title="Reviews of Episodes 9-10 &amp; Summary">Episodes 9 - 10 &amp; Summary</a></li>
</ul></li>
<li><a href="set03a.html" title="A&amp;E DVD Review, Set 3 (1975-1977)">A&amp;E DVD Review, Set 3</a><ul>
<li><a href="set03a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set03b.html" title="Reviews of Episodes 5 - 8">Episodes 5 - 8</a></li>
<li><a href="set03c.html" title="Reviews of Episodes 9-10 &amp; Summary">Episodes 9 - 10 &amp; Summary</a></li>
</ul></li>
<li><a href="set04a.html" title="A&amp;E DVD Review, Set 4 (1978-1981)">A&amp;E DVD Review, Set 4</a><ul>
<li><a href="set04a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set04b.html" title="Reviews of Episodes 5 - 7">Episodes 5 - 7</a></li>
<li><a href="set04c.html" title="Reviews of Episodes 8-10 &amp; Summary">Episodes 8 - 10 &amp; Summary</a></li>
</ul></li>
<li><a href="set05a.html" title="A&amp;E DVD Review, Set 5 (1982-1985)">A&amp;E DVD Review, Set 5</a><ul>
<li><a href="set05a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 3</a></li>
<li><a href="set05b.html" title="Reviews of Episodes 5 - 6">Episodes 4 - 6</a></li>
<li><a href="set05c.html" title="Reviews of Episodes 7- 9 &amp; Summary">Episodes 7 - 9 &amp; Summary</a></li>
</ul></li>
<li><a href="set06a.html" title="A&amp;E DVD Review, Set 6 (1986-1989)">A&amp;E DVD Review, Set 6</a><ul>
<li><a href="set06a.html" title="Reviews of Episodes 1 - 3">Episodes 1 - 3</a></li>
<li><a href="set06b.html" title="Reviews of Episodes 4 - 6">Episodes 4 - 6</a></li>
<li><a href="set06c.html" title="Reviews of Episodes 7- 8 &amp; Summary">Episodes 7 - 8 &amp; Summary</a></li></ul></li>

<li><a href="worldtour.html" title="Go to the Benny Hill's World Tour: New York DVD Review by William Brown">World Tour DVD Review</a></li>
<li><a href="hillsangelsconnections.html" title="Hill's Angels Connections Article by David Hawkins">Hill's Angels Connection</a></li>
<li><a href="collection.html" title="Go to the Benny Hill Collection DVD Review">Benny Hill Collection</a></li>
<li><a href="lostyears01.html" title="Benny Hill: The Lost Years DVD">The Lost Years DVD </a><ul>
<li><a href="lostyears01.html" title="The Lost Years: Bennies From Heaven Review">Bennies From Heaven</a></li>
<li><a href="lostyears02.html" title="The Lost Years: Benny &amp; The Jests Review">Benny &amp; The Jests</a></li>
<li><a href="lostyears03.html" title="The Lost Years: The Good, The Bawd &amp; The Benny Review">The Good, The Bawd &amp; The Benny</a></li>
<li><a href="lostyears04.html" title="The Lost Years: Bonus Benny! Review">Bonus Benny!</a></li>
<li><a href="lostyears05.html" title="The Lost Years: DVD Guide by William Brown">The Lost Years DVD Guide</a></li>
</ul></li>
<li><a href="stand.html" title="Reviews of One Night Video Stand, Video Spotlight, Home Video Drive In &amp; Video Follies">Golden Classics Review</a><ul>
<li><a href="stand.html" title="One Night Video Stand Review">One Night Video Stand</a></li>
<li><a href="spotlight.html" title="Video Spotlight Review">Video Spotlight</a></li>
<li><a href="drivein.html" title="Home Video Drive In Review">Home Video Drive In</a></li>
<li><a href="follies.html" title="Video Follies Review">Video Follies</a></li>
<li><a href="classics.html" title="Bonus Features &amp; Summary">Bonus Features</a></li>
</ul></li>
<li><a href="smiles.html" title="Reviews of Golden Smiles, Yucks, Guffaws, Laughs, Sniggers &amp; Chuckles">Golden Greats Review</a><ul>
<li><a href="smiles.html" title="Golden Smiles Review">Golden Smiles</a></li>
<li><a href="yucks.html" title="Golden Yucks Review">Golden Yucks</a></li>
<li><a href="guffaws.html" title="Golden Guffaws Review">Golden Guffaws</a></li>
<li><a href="laughs.html" title="Golden Laughs Review">Golden Laughs</a></li>
<li><a href="sniggers.html" title="Golden Sniggers Review">Golden Sniggers</a></li>
<li><a href="chuckles.html" title="Golden Chuckles Review">Golden Chuckles</a></li>
<li><a href="greats.html" title="Bonus Features &amp; Summary">Bonus Features</a></li>
</ul></li>
<li><a href="annuals.html" title="Benny Hiil Annuals: Regions 2 Releases">Benny Hill Annuals: R2</a></li>
<li><a href="r2reviews01.html" title="Benny Hiil Region 2 DVD &amp; VHS Reviews">Region 2 Reviews</a></li>
<li><a href="ultimatedvd.html" title="Benny Hill on DVD">The Ultimate DVD</a></li>
<li><a href="vhs.html" title="Benny Hill on VHS by William Brown">Benny Hill on VHS</a></li>

<li><a href="doyle.html" title="Love Machine Interview">Love Machine Q&amp;A</a><ul>
<li><a href="colthorpe.html" title="An Interview with Jane Eve (Colthorpe)">Jane Eve (Colthorpe)</a></li>
<li><a href="doyle.html" title="An Interview with Lorraine Doyle (Greening)">Lorraine Doyle (Greening)</a></li>
<li><a href="lucas.html" title="An Interview with Teresa Lucas">Teresa Lucas</a></li>
<li><a href="lutter.html" title="An Interview with Claire Lutter">Claire Lutter</a></li>
</ul></li>
<li><a href="kendall.html" title="Famous Angels In Exclusive Interviews">Angels In The Spotlight</a><ul>
<li><a href="kendall.html" title="An Interview with Penny Kendall">Penny Kendall</a></li>
<li><a href="upton.html" title="An Interview with Sue Upton">Sue Upton</a></li>
<li><a href="facey.html" title="An Interview with Vicky Facey">Vicky Facey</a></li>
<li><a href="alisonthomas.html" title="An Interview with Alison Thomas">Alison Thomas</a></li>
</ul></li>
<li><a href="chat01.html" title="Celebrity Chats with Stars of The Benny Hill Show In Person">Celebrity Chats</a><ul>
<li><a href="chat01.html" title="Celebrity Chat: Coffee with Penny Kendall by David Hawkins">Penny Kendall</a></li>
</ul></li>
<li><a href="mandel.html" title="Interviews with Stars of The Benny Hill Show">Benny Hill Stars Q&amp;A</a><ul>
<li><a href="mandel.html" title="An Interview with Suzy Mandel">Suzy Mandel</a></li>
<li><a href="pilgrim.html" title="An Interview with Christine Pilgrim">Christine Pilgrim</a></li>
<li><a href="walker.html" title="An Interview with Louise Walker">Louise Walker</a></li>
<li><a href="wilde.html" title="An Interview with Dee Dee Wilde">Dee Dee Wilde</a></li>
<li><a href="jaynemarie.html" title="An Interview with Jayne-Marie">Jayne-Marie</a></li>
<li><a href="lebeau.html" title="An Interview with Bettine Le Beau">Bettine Le Beau</a></li>
<li><a href="jonjonkeefe.html" title="An Interview with Jon Jon Keefe">Jon Jon Keefe</a></li>
</ul></li>
<li><a href="sitemap01.html" title="News Archives">News Archives</a><ul>
<li><a href="sitemap11.html" title="Updates from September 3, 2007 to November 27, 2007.">Archive 11</a></li>
<li><a href="sitemap10.html" title="Updates from December 19, 2006 to August 19, 2007.">Archive 10</a></li>
<li><a href="sitemap09.html" title="Updates for October 13, 2006 to December 14, 2006">Archive 9</a></li>
<li><a href="sitemap08.html" title="Updates for February 19, 2006 to October 9, 2006">Archive 8</a></li>
<li><a href="sitemap07.html" title="Updates for September 20, 2005 to February 17, 2006">Archive 7</a></li>
<li><a href="sitemap06.html" title="Updates for July 27 - September 17, 2005">Archive 6</a></li>
<li><a href="sitemap05.html" title="Updates for June 2 - July 24, 2005">Archive 5</a></li>
<li><a href="sitemap04.html" title="Updates for March 22 - June 2005">Archive 4</a></li>
<li><a href="sitemap03.html" title="Updates for October 24, 2004 - March 22, 2005">Archive 3</a></li>
<li><a href="sitemap02.html" title="Updates for August 30, 2004 - October 18, 2004">Archive 2</a></li>
<li><a href="sitemap01.html" title="Updates for August, 2003 - August 26, 2004">Archive 1</a></li>
</ul></li>
<li><a href="awards.html" title="Website Awards Page">Website Awards</a></li>
<li><a href="competitions.html" title="Go to the Competitions Page">Competitions</a></li>
<li><a href="privacy.html" title="Important Information regarding the use of this site and information for parents">Privacy Policy</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&amp;i=g35-15360-60" title="Read or Leave A Message in The Guestbook" target="_blank">Guestbook</a></li>
<li><a href="oldgb01.html" title="Guestbook Archive">Guestbook Archive</a><ul>
<li><a href="oldgb01.html" title="Page 1">Page 1</a></li>
<li><a href="oldgb02.html" title="Page 2">Page 2</a></li>
<li><a href="oldgb03.html" title="Page 3">Page 3</a></li>
</ul></li>
<li><a href="http://bennyhillshotelsplendide.yuku.com/" title="Go To Benny Hill's Hotel Splendide ezboard" target="_blank">Hotel Splendide ezboard</a></li>
<li><a href="http://www.runstop.de/bennysplace/wands/index.html" title="Wayne &amp; Shuster Tribute" target="_blank">Wayne &amp; Shuster Tribute</a></li>
<li><a href="http://www.runstop.de/bennysplace/sctv/index.html" title="Go to the SCTV on DVD Campaign" target="_blank">SCTV on DVD Campaign</a></li>
<li><a href="http://www.bennyhill.net/" title="Benny Hill Links" target="_blank">Benny Hill Links</a><ul>
<li><a href="http://www.bennyhill.net/" title="www.bennyhill.net" target="_blank">Official Benny Hill Site</a></li>
<li><a href="http://www.tnsf.ca/bennyhill/" title="The Benny Hill Songbook" target="_blank">The Benny Hill Songbook</a></li>
<li><a href="http://www.geocities.com/ckcapck/ben.html" title="The One and Only Benny Hill" target="_blank">One and Only Benny Hill</a></li>
<li><a href="http://www.laughterlog.com/Personalities/per-bhill.HTM" title="Go to laughterlog.com for an interesting page on Benny Hill" target="_blank">www.laughterlog.com</a></li>
<li><a href="http://www.nicholasparsons.co.uk/" title="Official Site Of Nicholas Parsons" target="_blank">Nicholas Parsons Site</a></li>
</ul></li>
<li><a href="http://movies.groups.yahoo.com/group/hilldvd/" title="Benny Hill On DVD Campaign!" target="_blank">Benny Hill On DVD!</a></li></ul>

<!DOCTYPE html>
<html lang= "en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The number one Benny Hill website, Benny's Place featuring Louise English and Hill's Angels">
<meta name="author" content="threerandot">
<link rel="icon" href="error.html">
<link rel="stylesheet" href="benny.css" type="text/css" media="screen">
<title>Benny's Place - Site Map - News &amp; Updates</title>
</head>
<body>

<a id="top"></a>
<div id="header">
<div class="title">Benny's Place Featuring Louise English &amp; Hill's Angels</div>
<div id="holder">
<div id="content">
<div class="buttons">
<span class="home">
<a href="index.html">
<img src="home.gif" width="32" height="32" alt="Go to The Home Page" title="The Home Page"></a></span>
<span class="map">
<a href="sitemap.html">
<img src="map.gif" width="32" height="32" alt="Go to The Site Map Page" title="The Site Map Page"></a></span>
<span class="links">
<a href="links.html">
<img src="link.gif" width="32" height="32" alt="Go to The Links Page" title="The Links Page"></a></span>
<span class="book">
<a href="http://users3.smartgb.com/g/g.php?a=s&amp;i=g35-15426-ca" title="Read or Leave A Message in The Guestbook" target="_blank"><img src="book.gif" width="32" height="32" alt="Read or Leave a Message in The Guestbook"></a></span>
<span class="search">
<a href="search.html" title="Go the Search Page" target="_blank"><img src="glass.gif" width="32" height="32" alt="Go the Search Page"></a></span>
</div>

<h1>Site Map</h1>

<div class="entry">
<h2>News &amp; Updates</h2>
<p>This page covers Updates from December 2, 2007 to the present.</p></div>

<div class="entry">
<h2><a href="colthorpe.html" title="Read the All-New Q&amp;A with Jane Eve (Colthorpe)">Update: December 2, 2007<br>
New: Exclusive Love Machine Q&amp;A with Jane Eve (Colthorpe)</a></h2>
<p class="pic"><a href="colthorpe.html" title="Click on this image of Jane and read the All-New Q&amp;A with Jane Eve (Colthorpe)"><img src="jane.jpg" width="130" height="130" alt="Q&amp;A with Jane Eve (Colthorpe)" title="Click on this image of Jane and read the All-New Q&amp;A with Jane Eve (Colthorpe)"></a></p>
<p>I was fortunate to hear from another member of Love Machine, <a href="colthorpe.html" title="Click on this image of Jane and read the All-New Q&amp;A with Jane Eve (Colthorpe)">Jane Eve (Colthorpe)</a>! Jane was very kind to not only consent to an <a href="colthorpe.html" title="Click on this image of Jane and read the All-New Q&amp;A with Jane Eve (Colthorpe)">exclusive interview</a> for Benny's Place, but she even passed along some really cool clippings from magazines, newspapers and photos as well. A special thanks to <a href="colthorpe.html" title="Click on this image of Jane and read the All-New Q&amp;A with Jane Eve (Colthorpe)">Jane</a> for taking some time to get in touch with her fans. Read her <a href="colthorpe.html" title="Click on this image of Jane and read the All-New Q&amp;A with Jane Eve (Colthorpe)">interview</a> now!</p><hr></div>

<p class="footer"><a href="#top" title="Return to the Top of this page">Top Of Page</a><br>
<a href="mailto:[email protected]?Subject=&amp;body=Re_Benny_Hill" title="Send emails to [email protected] and please include Re Benny Hill in the body of the message. Thank You.">Contact William</a><br>&copy; April 06, 2002.</p>
</div></div></div>

<div id="right"><div id="menu"><!--#include virtual="navigation.html" --><div class="entry"><p>Webmaster: threerandot<br>Contributing Editor:<br>William Brown<br>Associate Editor:<br>David Hawkins</p></div><p>Printing pages:<br>All pages are now printable throughout the site, except for Photo Galleries. I cannot guarantee perfect results. Use 'Print Preview' to see how your browser renders a given page before printing.</p>
</div></div>
</body></html>

This is my CSS for the majority of the pages on my site. I know it is not the easiest to read. If you need me to tidy it up, please let me know.

body{background:#9cf url(tvworkoutbackground.jpg) top right no-repeat;color:#9cf;font-family:arial,verdana,serif;font-variant:small-caps;padding:0;margin:0;height:100%}#header{color:#000;background:url(decor.jpg) #9cf repeat-y;margin:0 240px 0 20px;padding:10px 10px 30px 70px;border:none;height:500%;font:small-caps bold 135% arial,verdana,serif}#holder{position:relative;background:#09c;color:#fff}#content{position:relative;color:#FFF;letter-spacing:1px;padding:15px;margin:15px 0 0 0; border:#0FC medium ridge;top:-10px;left:10px;height:100%;background:#069;font:normal bold 70% verdana,arial,serif}#right{position:absolute;top:220px;right:20px;padding:0;margin:0;width:200px;font:normal bold 80% verdana,arial,serif;background:#9cf;color:#000}
#menu{left:35px;right:35px;top:40px;width:200px;}#menu.ul{margin:0;padding:0;list-style:none;width:200px;border-left:1px solid #0CF;border-right:1px solid #0CF;border-bottom:1px solid #0CF}#menu ul li{position:relative;border-top:1px solid #0CF;border-left:1px solid #0CF;border-right:1px solid #0CF;min-width:200px}li ul{position:absolute;right:202px;top:0;display:none}#menu ul li a{display:block;text-decoration:none;padding:4px}#menu ul li{float:left}ul li a{display:block;height:1%}#menu ul{margin:0;padding:0;list-style:none;width:200px;border-bottom:1px solid #0CF}li:hover ul,li.over ul{display:block}#gallery{margin: 0 0 1em 0;font:normal bold 100% verdana,arial,serif;background:#069;color:#000;}.gallery{list-style:none;background:#069;color:#000;margin:0;padding:0}#gallery a{text-decoration:underline;color:#000;background:#069;}form{background:#069;color:#9cf;padding:4px;width:180px}input.text{width:100px;margin-right:0px}abbr,acronym,.help{border-bottom:#ff3 1px dotted;cursor:help;color:#ff3;background:#069}#right dl{background:#9CF;color:#000}#right dl a{text-decoration:underline;color:#000;background:#9CF;border:0;padding:0}#right dd a{text-decoration:underline;color:#000;background:#9cf;border:0;margin:0 0 0 -20px}#content{min-height:3500px}* html #content{height:2000px}div.entry{float:left;padding:0;margin:0 0 2em;width:100%}#content p.pic a{color:#069;background:#069;border:0;margin:0;padding:0}div.entry .pic{float:left;clear:left;margin:5px 5px 0 0;position:relative}div.entry hr{display:block;clear:left;margin:-0.001em;visibility:hidden}div.photo{margin:0 0 3em 30px}#content a:link img{border-style:solid;border-top-color:#069;border-right-color:#069;border-bottom-color:#069;border-left-color:#069;border-width:2px}#content a:visited img{border-style:solid;border-top-color:#069;border-right-color:#069;border-bottom-color:#069;border-left-color:#069;border-width:2px}#content a:active img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#content a:hover img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#content a:focus img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}div.episode{padding:0;margin:0 0 0 40px}#content p.date{color:#ff3;background:#069;margin-bottom:1em;font-size:medium}#right div.icon a{background:#9cf;color:#000}#right div.entry{float:left;padding:0;margin:0 0 0 0;width:100%}#right div.return{float:left;background:#9cf;color:#000}#right div.return a{background:#9cf;color:#000}#right a:link img{border-style:solid;border-top-color:#9CF;border-right-color:#9CF;border-bottom-color:#9cf;border-left-color:#9cf;border-width:2px}#right a:visited img{border-style:solid;border-top-color:#9CF;border-right-color:#9CF;border-bottom-color:#9cf;border-left-color:#9CF;border-width:2px}#right a:active img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#right a:hover img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-top-width:2px}#right a:focus img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#right div.icon p.par a:link{background:#9cf;color:#000}#right div.icon p.par a:visited{background:#9cf;color:#000}#right div.icon p.par a:active{background:#069;color:#ff3}#right div.icon p.par a:hover{background:#069;color:#ff3}#right div.icon p.par a:focus{background:#069;color:#ff3}#right p.par{background:#9cf;color:#000}#right p a{background:#9cf;color:#000}#right p.img{background:#9cf;padding:0;margin:0}#right p.dvd{margin:2em 0 2em 0;background:#069;color:#fff;border:#0fc medium ridge;padding:5px;width:180px;font-size:90%;line-height:150%}#right p.privacy a{font-size:100%;text-decoration:underline;padding:0px;}a:hover,a:active,#content a:hover,#content a:active,#content a:hover,#content a:active,#content a:focus{color:#ff0;background:#069;text-decoration:none}a:hover,a:active,#right a:hover,#right a:active,#right a:hover,#right a:active,#right a:focus{color:#fff;background:#9cf;}a:hover,a:active,#right ul.links a:hover,#right ul.links a:active,#right ul.links a:hover,#right ul.links a:active,#right ul.links a:focus{color:#ff0;background:#069;}a:hover,a:active,#right ol.links a:hover,#right ol.links a:active,#right ol.links a:hover,#right ol.links a:active,#right ol.links a:focus{color:#fff;background:#069;}a:link{text-decoration:underline;color:#0FC;background:#069}a:visited{text-decoration:none;color:#CCC;background:#069}a:active{text-decoration:none;color:#FFF;background:#069}a:hover{text-decoration:none;color:#FF0;background:#069}h1{clear:both;color:#FFF;line-height:120%;letter-spacing:1px;font-size:x-large;font-style:normal;font-weight:600;border-top:#0fc medium ridge;padding:1em 0 0 15px;margin:.25em -15px 1em;background:#069}h2{color:#FF3;font-size:medium;padding:0;margin:0;border:0;background:#069}#content h2 a:hover{background:#069;color:#ff3}#content div.entry h2 a{background:#069;color:#ff3}#content div.episode h2 a{background:#069;color:#ff3}h3{color:#FF3;font-size:medium;margin-bottom:-1em;background:#069;text-decoration:none}h4{font-size:medium;padding:0;margin:0;border:0}h5{font-size:medium;padding:0;margin:0 0 -1em 15px;border:0;color:#ff3;background:#069}h6{font-size:medium;padding:0;margin:0 0 -1em 0px;border:0;color:#ff3;background:#069}strong{color:#FF3;background:#069}p{padding:0;margin:0}p.par{padding:0;margin:0 0 2em}p.par2{padding:0;margin:2em 0 2em}#content p{line-height:128%}#content p.one{margin-top:5px;margin-bottom:5px;font-size:90%}#content p.two{margin-top:5px;margin-bottom:5px;font-size:75%;color:#FF3;background:#069}#content p.three{letter-spacing:-1px;margin:2em 0;font-size:95%;color:#FFF;background:#069}#content p.three a{text-decoration:none}#content p.four{letter-spacing:-1px;margin-bottom:1em;color:#FFF;background:#069}#right p.par{padding:0;margin:0 0 2em}#right p{padding:0;margin:1em 0 1em}p.footer{padding:0;margin:2em 0 0;font:normal bold 80% verdana,arial,serif;line-height:150%}p.footer a{text-decoration:underline}a:hover,a:active,#content p.footer a:hover,#content p.footer a:active,#content p.footer a:hover,#content p.footer a:active,#content p.footer a:focus{color:#ff0;background:#069;text-decoration:none}h3.com{margin-left:15px}#content ul{list-style-type:none;margin-bottom:3em}#content ol{margin-bottom:3em}#menu a{text-decoration:none}#menu ul li{float:left;height:1%;width:100%}#menu ul li a{height:1%}li ul{right:202px}p.footer{margin:0;height:1%}#underlinemenu{margin: 0;padding: 0;}
#underlinemenu,#underlinemenu ul{margin: 0;padding:0;float: left;font-variant:small-caps;}
#underlinemenu,#underlinemenu ul,#underlinemenu ul li a{float:left;}
#underlinemenu ul{margin-bottom:1em;}#underlinemenu ul,#underlinemenu ul li a{font-weight:bold;}* html #underlinemenu ul{margin-bottom:0;}#underlinemenu ul li{display:inline;}
#underlinemenu ul li a{color:#fff;padding:6px;text-decoration:none;background:#069;border-right:2px solid #0fc;background:#069;border-bottom:2px solid #069;}
#underlinemenu ul li a:hover{color:#ff3;background:#000;border-bottom:2px solid #ff3;padding:6px}
span.link a span{display:none}span.link a:hover{font-size:100%}span.link a:hover span{display:block;position:absolute;margin-top:50px;margin-left:-150px;width:200px;padding:5px;z-index:100;background:#000;color:#ff3;border-style:solid;border-width:1px;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;text-decoration:none}#content span.link a:hover span{margin-top:30px;margin-left:0px}div.search {width:100%;border:0}img {max-width: 100%; height: auto;}ul, li{ margin: 0; padding: 0;}
.gallery {display: flex;align-items: flex-start;justify-content: flex-start;font-size: 1.5em;background-color:#069;}  
.text { width: calc(100% - 150px);color: #fff;font-size: 14px; margin-left: 10px;background-color:#069;}
#content .gallery {background-color:#069;}
/*change the number below to scale to the appropriate size*/
.thumbnail:hover {transform: scale(1.40); } .thumbnail img {position:relative;}

@media screen and (max-width: 768px) {
    body {display: flex; background:#9cf;url:(display:none;)}
    #right {display: none;}
    #header {background:#9cf;url:(display:none;);}
      #holder {width: 160%; margin: 0 0 0 -65px;}

@media screen and (max-device-width : 640px) {
/* Styles */
    body { background:#9cf;url:(display:none;)}
    #right {display: none: padding: 1%}
    #header {display: block; background:#9cf;url:(display:none;);}
      #holder {}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS */
    body { -webkit-text-size-adjust: none; background:#9cf;url(display:none;)}
    #right {display: none;}
    #header {width: 50%;background:#9cf;url:(display:none;);}
      #holder {background: #9cf; url:(display:none;)}
    .title {font-size: 14px;}

 

[sacdman]

I have managed to find a menu that looks like it will work with my site. There are some adjustments that do need to be made as there is no scrollbar when the menu opens. I would also like to re-position the button to open the menu. Any help is appreciated. I have added this HTML to the sitemap page, just after the body tag


<div class="pure-container" data-effect="pure-effect-push">
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left">
<label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label>
<nav class="pure-drawer" data-position="left">
<p style="padding: 25px 20px; margin: 0;"><!--#include virtual="navigation.html" --></p>
</nav></div>

My sitemap page

I have attached the CSS file and any help or suggestions are always appreciated. Thanks.

 

[VBService]

URL update: https://www.bennysplace.eu/index.html