Sub menu in responsive drop down menu not opening

Kenneth LaVoie Greenhorn

Messages:: 17

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#1

Good Morning
Thank you so much in advance to anyone who can offer help.

I've got a basic responsive horizontal navigation menu at re-rebel dot com They work wonderfully on a full sized browser but when I view on android, OR shrink the PC browser down to the same size, the drop downs quit working. The menu shrinks to one button nicely (and opens when clicked on), but the remaining do not.

The style sheet and java files are in the folder www.re-rebel.com/css (there's a separate css file in there JUST for the menu so it should be easier to navigate). Also, the css for the rest of the website is in style.css file one level up, in the root directory (i.e. www.re-rebel.com/style.css)

This menu is from cssmenumaker.com if that helps.

Thanks again!

Kenneth LaVoie, Feb 27, 2019 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#2

First off that menu is outdated trash built by people not qualified to write a single line of HTML/CSS -- as evidenced by using JavaScript for the desktop version where we've not needed JS for that for a decade and a half, and then more scriptttardery for mobile when that's not needed JS since IE9. That it then relies on the train wreck laundry list of how NOT to write JavaScript that is jQuery? Epic /FAIL/ at web development.

But it gets worse from there. The whole page is knee deep in woes. Content-bearing elements (TITLE and the description META) before the charset declaration could result in the browser re-starting parsing from the start, non-standard encoded characters in the description, stuffed description, decade out of date http-equiv style character declaration (that's not how HTML 5 does it), that XU-A compatible nonsense that no new website should EVER have to declare (that exists to tell newer IE to behave like old ones for crappy old code, NOT to tell it to always use the newest!), no MEDIA attributes on the stylesheet LINK, mish-mash of HTML 3.2 style upper-case tags and pointless XML closures in a 5 document, blocking scripts in the head (on a page not doing anything that needs JS), presentation in the markup where it has ZERO blasted business being (aka all your STYLE attrributes), double-breaks doing P's job on obviously grammatical paragraphs, HR for "I want a line across the screen" instead of what they MEAN -- a change in topic/section where heading text is unwanted or unwarranted. TARGET attributes shoving new windows down the user's gullet (accessibility /FAIL/) with an invalid target (since I don't see a FRAME or IFRAME with the ID "new" on it), double breaks doing padding's job, missing closures, comment placements that could trigger rendering errors (yes, wrong as that is, it's a thing), etc, etc, etc.

Much less if all your text is EMphasized, none of it is. Combined with that overuse of strong on the same phrase over and over might also get you pimped slapped clear off of search entirely! Everything as italic AND in a serif font further compromising accessibility.

Whatever source you're learning to build websites from? Pitch it in the trash.

Realistically your HTML should be structured more like this:


<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
><!-- HTML 5 valdiation will bitch about projection and TV, f*** e'm! -->
<link
	rel="shortcut icon"
	href="favicon.ico"
>
<title>
	Trail of the Season: Southern Humboldt Community Park - Bored Feet Press
</title>
<!-- remember, Page Title - Site Title, HYPHEN, not vertical break!!! -->
</head><body>

<div id="top">

	<h1>Boreed Freet Press</h1>

	<input type="checkbox" id="toggle_mainMenu" class="toggle">
	<label for="toggle_mainMenu"></label>
	<ul id="mainMenu">
		<li class="current"><a href="index.php">Home Page</a></li>
		<li><a href="books.php">Books &amp; Maps</a></li>
		<li><a href="browse.php">Search/Browse</a></li>
		<li>
			<input type="checkbox" id="toggle_categories" class="toggle">
			<label for="toggle_categories">Categories</label>
			<ul>
				<li><a href="topics/newstuff.php">New for 2019</a></li>
				<li><a href="topics/specials.php">Sale Books</a></li>
				<li><a href="topics/bestsellers.php">Best Sellers</a></li>
				<li><a href="hip.php">Hip Pocket Guides</a></li>
				<li><a href="hikingcct.php">Hiking the California<br>Coastal Trail</a></li>
				<li><a href="morehiking.php">More Hiking, Climbing,<br> and Biking Books</a></li>
				<li><a href="mappages/maps.php">Outdoor Recreation Maps</a></li>
				<li><a href="travel.php">Travel &amp; Languages</a></li>
				<li><a href="natpho.php">Nature &amp; Photography</a></li>
				<li><a href="poetry.php">Food, Wine,<br>Fiction, Satire, &amp; Poetry</a></li>
				<li><a href="history.php">Western History</a></li>
				<li><a href="kids.php">Children's Books</a></li>
				<li><a href="art.php">Fine Art</a></li>
				<li><a href="health.php">Health</a></li>
				<li><a href="tide.php">Calendars &amp;<br> Literary Playing Cards</a></li>
			</ul>
		</li>
		<li><a href="trailmonth.php">Sample Trail</a></li>
		<li><a href="updates.html">Trail Updates</a></li>
		<li><a href="linx/links.php">Links</a></li>
		<li><a href="contact.php">Contact Us</a></li>
		<li><a href="order.php">Prices/Order Form</a></li>
		<li><a href="cartstuff/seecart.php">View Cart</a></li>
	</ul>

	<div id="content">

		<h2>
			Trail of the Season: <br>
			Southern Humboldt Community Park
		</h2>
		<p>
			Every once in a while, we'll feature a sample hike from one of our hiking guide books. This sample trail listing is from: <i><a href="singles2/hiphum3.php">The Hiker&rsquo;s hip pocket Guide to the Humboldt/Del Norte Coast, 3rd Ed.</a></i>
		</p>

		<h3>Archived Trails of the Month:</h3>
		<ul>
			<li><a href="trailbigriv.php">Big River</a></li>
			<li><a href="trailpomo.php">Pomo Canyon to Shell Beach</a></li>
		</ul>

		<h3>
			Southern Humboldt Community Park<br>
			<small>Garberville, CA</small>
		</h3>
		<dl>

			<dt>DISTANCE:</dt>
			<dd>
				2-1/8 to 3-3/8 miles on three connecting loops.
			</dd>

			<dt>TERRRAIN:</dt>
			<dd>
				Mostly level grasslands and oak woodlands, with two optional wooded, steeper loops through mixed forest.
			</dd>

			<dt>ELEVATION GAIN/LOSS:</dt>
			<dd>
				120 feet+/120 feet- for main loop. Add 70 feet+/70 feet- for first forest loop, 100 feet+/100 feet- for New Forestry Loop.
			</dd>

			<dt>TIME:</dt>
			<dd>
				One or two hours.
			</dd>

			<dt>BEST TIME:</dt>
			<dd>
				Spring and fall. Also pleasant in winter between storms.
			</dd>

			<dt>WARNINGS:</dt>
			<dd>
				Watch for poison oak.
			</dd>

			<dt>CAUTIONS/NOTES:</dt>
			<dd>
				Do not block gate at trailhead. No smoking or fires. No dogs allowed.
			</dd>

			<dt>HOW TO GET THERE:</dt>
			<dd>
				Exit Highway 101 at Garberville/Sprowel Creek Road exit (MP.11.3 from north, MP. 10.9 from south). Go west on Sprowel Creek Road for 1.0 mile from Main Street (.9 mile from Freeway north) to park entrance on left. A second park entrance is .7 mile beyond the main entrance on the left side of Camp Kimtu Road.
			</dd>

		</dl>
		<p>
			This welcoming 430-acre community park nestles in a gentle valley in the often rugged South Fork Eel River canyon. Located just outside Garberville, the unique natural beauty of the park features grasslands, upland forests, prime farmland, a one mile stretch of the &ldquo;Wild and Scenic&rdquo; river complete with playground and swimming beach, native redwoods, and a 20-acre hilltop across the river. Local businessman Stephen Dazey led a drive to raise $650,000 to buy the parklands, part of a nineteenth century ranch. The park opened in 2000 with the Meadow Loop Trail opening in 2003. The forest trails have been added since then.
		</p><p>
			Native peoples of local Sinkyone and neighboring tribes, especially the Wailaki and Wiyot used the park&rsquo;s lands for centuries, harvesting the abundant acorns and other native plants and catching fish from the river. After the California Gold Rush, Euro-American settlers disrupted the native ways of life, developing farms and ranches and harvesting the timber. The 1960s and &lsquo;70s brought a new wave of settlers with their often countercultural ways. Today the park&rsquo;s restored habitats inspire deep appreciation and reverence for nature, and a chance to recreate in this lovely place.
		</p><p>
			Park near the kiosk across from the farm residence. Follow the main trail, an old ranch road, as it heads west-southwest past the historic ranch house, two small barns and abundant willows. Continue along the broad dirt track, passing through a ranch gate and past two more weathered barns. Near the latter barn, the ranch road turns right, leading to a nearby chemical toilet and the Garberville Community Farm beyond the trees. Take the narrower double track that continues west-southwest past pennyroyal and a variety of farm vehicles, including a couple of electric ones. You pass invasive Himalayan blackberries and a skate ramp on your right. Beyond those stand a natural windbreak of black oaks and bay laurels.
		</p>

		<img
			src="https://realmendocino.com/pagepics/th_soHumCommunityPark-680.jpg"
			alt="Map of Southern Humboldt Community Park"
			class="plate"
		>
		<p>
			You soon come to a junction where you can go either way. Our described hike turns right to follow the narrower path. You head northwest briefly, then merge with a narrow path from the main entrance. Veer left on the path that heads west through the grasslands. (Another trail veers right to explore the nearby woods, with madrones and bigleaf maples joining the oaks and bays.) After passing the Southern Humboldt Labyrinth on your left, continue west along the edge of grasslands and woods. Douglas firs join the mixed forest, but it is the large black oaks that are a defining characteristic of the park.
		</p><p>
			Cross a metal footbridge over a seasonal stream. Toyon grows beside the bridge. Two short cross-park trails head south-southeast on either side of the deep stream channel. You can take either of these to the south side of the park if you prefer a shorter walk. Three other side trails fork right to explore the nearby woodlands. Continue west-southwest on the trail beyond the bridge. At 1/2 mile you pass a side trail on the right, the end of the last two side trails back at the bridge. Look for California poppies in spring.
		</p><p>
			At 5/8 mile you reach the secondary parking area on Kimtu Road, with another kiosk and chemical toilet. On your left, a picnic table is in a pleasant, shady spot beneath black oaks and madrones. A second picnic table is in a sunnier spot near the kiosk. South Fork Eel River flows by just across Kimtu Road.
		</p><p>
			Your trail continues, soon climbing south-southeast along the park boundary. The adjacent land owner allows park visitors to use this corner of his land. You pass a rose bush on your left that looks like an old-fashioned garden variety, then more Himalayan blackberry.
		</p><p>
			Cross a metal bridge over a small seasonal stream at mile, coming onto the land of the obliging neighbor. In 75 feet, turn right onto the narrow side path into the nearby woods. Beneath Douglas firs, bays and madrones grows an immense antique grape vine. With a base eight inches in diameter and its long vines, the grape has most of its foliage high above near the top of the tall madrone nearby. This vine and another about 40 feet away, seem to love madrone and avoid nearby bays and firs.
		</p><p>
			Your side trail promptly rejoins the main path, passing narrow-leaved mule ears on your left. Your trail meanders in and out of the woodland. You come to a very large California buckeye, slouching like a teenager along the edge of the meadow. Honeysuckle and hedge nettle grow in shady corners of the grassland then native wood rose. Continue past irises and more buckeyes beneath black oaks and bays, with madrones nearby. Your track bends left and climbs to a pleasant vista across the park to surrounding ridges.
		</p><p>
			At 7/8 mile the trail bends left to head east past a rustic rest bench, promptly returning to park property. On your right you pass an old water trough and plum trees, growing along an old fence at this high point for the Meadow Loop. Honeysuckle, poison oak and blackberry, both Himalayan and California native, also abound. This area is prime wood nymph butterfly habitat.
		</p><p>
			Beyond one mile you come to a junction, with a rest bench just beyond. You can continue on Meadow Trail for a 2-mile loop. Our described hike turns right to explore the woodland trails on this wilder side of the park. You climb gradually southeast, following the fence line into woods of black oaks, bay laurels, buckeyes and young Douglas firs. In 500 feet, ignore the fork on the left. Continue climbing, passing through the fence line. At 1/8 mile hop over a gully as you roughly parallel the fence. Coyote brush and sword ferns join the understory.
		</p><p>
			At a fork before 1/4 mile, turn right to ascend into forest. (A left returns you to the place you left the Meadow Trail.) You quickly cross a small gully and enter a different ecological niche. California hazel, starflower, wild strawberry, twisted stalk, honeysuckle, polypody and sword ferns thrive beneath Douglas fir, madrone and bay. Then, having climbed to 315 feet in elevation, you descend past young bigleaf maples, wood rose, and lady ferns. Descend to the lower forest trail, then turn left to return to the Meadow Trail beyond 3/4 mile.
		</p><p>
			Head east, then north on the Meadow Trail, coming to the first of the cross-park trails beyond 1-1/8 miles. A sign on your right marks &quot;Educational Camp&quot; under large black oaks. Continue east on Meadow Trail, crossing a gully on a metal bridge (or a ford for equestrians). After meeting the second cross-park trail, find another rustic bench beside a sprawling bigleaf maple. Continue southeast along the ecotone, the boundary between meadow and forest. Across the meadow on your left, notice the immense ancient bay laurels, among the tallest in the park.
		</p><p>
			Around 1-3/8 miles, on your right you pass a signed old man&rsquo;s beard lichen (Usnea longissima) growing on a black oak above the gully you&rsquo;ve been following. Longissima is the longest, and among the rarest, of this family of lichens. It&rsquo;s relative Usnea barbata also grows in the park. Have you noticed how deep the gullies in the park are? Apparently they became so during the monstrous 1964 flood. When you reach another fence line, look left for Celebration Grove, a venue for events. Your trail returns to the forest.
		</p><p>
			You come to a T junction around 1-1/2 miles, with a rest bench nearby. You can turn left here to finish the Meadow Loop. Our described route turns right. In just 150 feet go left on the New Forestry Trail. (If you go straight you meet the end of the earlier forest loop.) Climb east for 125 feet, then turn right as New Forestry Trail climbs southeast along the edge of a gully, easily the steepest ascent of any trail in the park. A sign indicates that New Forestry Trail is a project of the Institute for Sustainable Forestry, a local group. The trail tops out just beyond at about 400 feet, where Douglas firs grow to two feet in diameter, along with oaks and bays.
		</p><p>
			At 1/4 mile you cross a gully that is more natural than the flood-scoured lower gullies. Descend to cross a rustic bridge over an even larger gully before 3/8 mile. This watercourse is narrow and fairly well vegetated here. Descend to a junction with the main trail. (The New Forestry Loop is mile if you return to the point at which you started it.)
		</p><p>
			Our described route turns right to follow Meadow Trail north-northeast beneath forest. Ignore a maze of side trails unless you know where you&rsquo;re going. Stay on the broad trail as it descends gently north. You come to a park gate, usually closed unless maintenance is being done, at 1-3/4 miles, with another gate on adjacent private property just beyond. Go 200 feet, crossing a gully and nearing the private gate, then go left to head northwest.
		</p><p>
			Follow Meadow Trail as it passes coast live oak and rounds Pepperwood Meadow, where the birds often sing and human music sometimes happens. Go north across a bridge over a gully around 1-7/8 miles. Your trail winds left and right, passing through a fence line, then beelines north across the base of a seasonal wet meadow. A big steel water tank sits on the hill at the top of the meadow. You cross one more gully, then angle left to return to the main parking area and kiosk at 2-1/8 miles.
		</p>
	<!-- #content --></div>

	<div id="footer>
		<h2>&copy; Bored Feet Press</h2>
		Post Office Box 1832<br>
		Mendocino, CA 95460<br>
		888-336-6199<br>
		<hr>
		<address>
			Web site by
			<a href="https://garthhagerman.com/">Garth Hagerman</a>
		</address>
		<a href="https://fb.me/boredfeet">
			<img
				src="grafs/find_us_on_facebook_badge.gif"
				width="144" height="44"
				alt="find us on facebook"
				class="plate"
			>
		</a>
	<!-- #footer --></div>

<!-- #top --></div>

</body></html>

Code (markup):

EVERYTHING else you're doing belonging in the CSS. The menu technique I would suggest is, well... my own which is explained here:

https://cutcodedown.com/tutorial/mobileMenu

But with dropdowns implemented using both the :hover and :target methods.

I'm pulling a fast fade right now -- sickly old man needs his afternoon nap -- but I'll try to revisit this later to toss together some CSS to show you how I'd go about the rest of that page, then maybe do a section by section breakdown of the how/what/why of both the HTML and CSS to explain the choices made, and expand upon explaining the things I outlined above as "wrong".

deathshadow, Mar 2, 2019 IP

mmerlinn Prominent Member

Messages:: 3,197

Likes Received:: 818

Best Answers:: 7

Trophy Points:: 320

#3

Kenneth LaVoie said: ↑

The style sheet and java files are in the folder www.re-rebel.com/css (there's a separate css file in there JUST for the menu so it should be easier to navigate).
Click to expand...

First, there is seldom, IF EVER, any need to use java on any webpage. Second, your site does NOT use ANY java at all. Third, there are NO java files in that folder.

So, my question is, "WHY even mention something that is NOWHERE on your site and NOWHERE in your files?"

mmerlinn, Mar 2, 2019 IP

Kenneth LaVoie Greenhorn

Messages:: 17

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#4

mmerlinn said: ↑

First, there is seldom, IF EVER, any need to use java on any webpage. Second, your site does NOT use ANY java at all. Third, there are NO java files in that folder.

So, my question is, "WHY even mention something that is NOWHERE on your site and NOWHERE in your files?"
Click to expand...

Hmmm...I meant a .js file, javascript. the file is in the folder cssmenu/script.js

Kenneth LaVoie, Mar 3, 2019 IP

Kenneth LaVoie Greenhorn

Messages:: 17

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#5

@deathshadow - Thank you for your help. I do admit I'm a bit out of practice, but am open to learning. I did overdo the SEO a little (a lot?) and have undone some of that and will go back and be a bit more thoughtful in my approach. This website is actually my own attempt at building a responsive site from scratch so that I'd understand how it all worked. It does rank 99 out of 100 on Google's speed test but of course that's not the end all. If you do come back after your rest and share some more with me, I'll promise to give it the attention it deserves!

Kenneth LaVoie, Mar 3, 2019 IP

Kenneth LaVoie Greenhorn

Messages:: 17

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#6

Kenneth LaVoie said: ↑

@deathshadow - Thank you for your help. I do admit I'm a bit out of practice, but am open to learning. I did overdo the SEO a little (a lot?) and have undone some of that and will go back and be a bit more thoughtful in my approach. This website is actually my own attempt at building a responsive site from scratch so that I'd understand how it all worked. It does rank 99 out of 100 on Google's speed test but of course that's not the end all. If you do come back after your rest and share some more with me, I'll promise to give it the attention it deserves!
Click to expand...

FOLLOW UP: I did solve the ORIGINAL problem of menu not opening. I'd used a snippet of code in the menu stylesheet: z-index: 1000 !important; - which is something I found to force an element to be up front. I changed that to z-index: 3 !important; and it solved both problems. The menu flyout (sub items) open now, AND they float in FRONT of the image under the menu, whereas before they did not.

Kenneth LaVoie, Mar 3, 2019 IP

Log in or Sign up

Advertising (learn more)

Sub menu in responsive drop down menu not opening

Kenneth LaVoie Greenhorn

deathshadow Acclaimed Member

mmerlinn Prominent Member

Kenneth LaVoie Greenhorn

Kenneth LaVoie Greenhorn

Kenneth LaVoie Greenhorn

Log in or Sign up

Advertising (learn more)

Sub menu in responsive drop down menu not opening

Kenneth LaVoie Greenhorn

deathshadow Acclaimed Member

mmerlinn Prominent Member

Kenneth LaVoie Greenhorn

Kenneth LaVoie Greenhorn

Kenneth LaVoie Greenhorn

Useful Searches