Member Avatar for billysim1

Ok so I have a problem that has been infuriating me for some time now and I really need to get it fixed.
Basically I have a menu system, with three 'levels' each of which is a separate list that is styled slightly differently; my HTML code is this:

<html>
<head>
</head>
<body>
<div class="header" align="right">
    <ul id="navlist">
    <li><a href="index.php">Home</a></li>
    <li><a href="business.php">Business</a></li>
    <li><a href="personal.php">Personal</a></li>
    <li><a href="about.php">About Us</a></li>
    </ul></div>

<div class="middle" align="right">
<ul id="middle">
<p>
<li><a href="onetoone.php">1 to 1 Coaching Support</a></li>
<li><a href="workshops.php">Workshops</a></li></ul>
</p>
</div>
<div class="bottom" align="right">
<ul id="bottom">
<p>
<li><a href="#">Confidence Building</a></li>
<li><a href="#">Make it Happen</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Booking Form</a></li>
<li><a href="#">Bespoke workshops</a></li>
<li><a href="#">Links</a></li></p>
</ul>
</div>
</body>
</html>

and my CSS is this:

.middle{
	background-image:url();
	background-repeat:no-repeat;
	position: absolute;
	top: 55px;
	left: 176px;
	width:900px;
	height:300px;
	overflow:hidden;
	margin-right: 9px;
	margin-left: 10px;
	margin-top: 0px;
	  }

.bottom{
	background-image:url();
	background-repeat:no-repeat;
	position: absolute;
	top: 97px;
	left: 176px;
	width:900px;
	height:300px;
	overflow:hidden;
	margin-right: 8px;
	margin-left: 8px;
	margin-top: 0px;
	  }

	.content{
		position:absolute;
		top:310px;
		left:176px;
		margin-top:15px;
		margin-right: 2px;
	 	margin-left: 2px;
	 	width:600px;
	 	height:inherit;
		padding:10px;
		
		}

a:link {COLOR: #FF3300; text-decoration: none; font-style: normal;}
a:visited {COLOR: #FF3300; text-decoration: none;}

a:hover {COLOR: #FF3300; text-decoration: underline;}


ul#navlist
{
margin-left: 20px;
margin-right:15px;
margin-bottom:15px;
white-space: nowrap;
margin-top:170px;
letter-spacing:normal;
font-size: 90%;
font-style:normal;
}
	
#navlist li
{
display: inline;
list-style-type: none;
margin-left:5px;
}


#navlist  a { padding: 10px 30px; }

#navlist a:link, #navlist a:visited
{
color: #ffffff;
background-color: #336699;
text-decoration: none;
}


#navlist a:hover
{
color: #ffffff;
background-color: #3366cc;
text-decoration: none;
}

ul#middle
{
margin-left: 20px;
margin-right:15px;
margin-bottom:15px;
white-space: nowrap;
margin-top:170px;
letter-spacing:normal;
font-size: 70%;
font-style:normal;
}
	
#middle li
{
display: inline;
list-style-type: none;
margin-left:5px;
}

#middle  a { padding: 10px 30px; }

#middle a:link, #middle a:visited
{
color: #ffffff;
background-color: #3c78b5;
text-decoration: none;
}


#middle a:hover
{
color: #ffffff;
background-color: #336699;
text-decoration: none;
}


ul#bottom
{
margin-left: 20px;
margin-right:15px;
margin-bottom:15px;
white-space: nowrap;
margin-top:170px;
letter-spacing:normal;
font-size: 60%;
font-style:normal;
}
	
#bottom li
{
display: inline;
list-style-type: none;
margin-left:5px;
}

#bottom  a { padding: 10px 30px; }

#bottom a:link, #bottom a:visited
{
color: #ffffff;
background-color: #6699cc;
text-decoration: none;
}


#bottom a:hover
{
color: #ffffff;
background-color: #006699;
text-decoration: none;
}

It's a bit messy, I'll give you that, but the problem I am having is: when I use the above code, only the bottom level of links are clickable, the other two levels you can't click on despite the href code.

Any thoughts? Much appreciated!

  • 2 Contributors
  • 2 Replies
  • 89 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by billysim1

Dani AI

Generated

Nice follow-up from and good to hear got it working. For anyone who finds this thread later: the symptom — visible links that do not respond to clicks — almost always means another element is sitting above them in the stacking order or the browser reflowed the DOM because of invalid markup. Start by checking the DOM and computed styles in your browser inspector to see which element covers the nav and whether it has a higher stacking context or pointer-events blocking clicks.

Concrete troubleshooting and fixes:

  • Inspect with DevTools: hover elements in the Elements pane, toggle display to see which one is blocking clicks, and check computed z-index and pointer-events.
  • Prefer flow-based layout (flexbox) instead of many absolute-positioned blocks for stacked menus.
  • If absolute positioning is required, explicitly control stacking and pointer behavior:
/* flow-based horizontal nav (preferred) */
nav ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
nav a  { display: inline-block; padding: 8px 12px; }

/* control stacking when using absolute positioning */
.middle { position: absolute; z-index: 20; }
.bottom { position: absolute; z-index: 10; }

/* make overlays ignore mouse events if appropriate */
.overlay { pointer-events: none; }

Also remove invalid tags (for example, do not wrap li elements with p) and validate your markup. For reference on stacking, positioning, and pointer behavior see MDN’s docs on z-index and positioning, pointer-events, and the ul element content model.

Recommended Answers

All 2 Replies

Member Avatar for tinimic

It's a bit messy, I'll give you that, but the problem I am having is: when I use the above code, only the bottom level of links are clickable, the other two levels you can't click on despite the href code.

Any thoughts?

Your absolute positioned elements are overlapping. While still visible, your links aren't accessible below the top layer. You can play with z-indexing, but I believe that you will have to try and re-do your markup and CSS to get rid of the the absolute positioning.

Member Avatar for billysim1

Your absolute positioned elements are overlapping. While still visible, your links aren't accessible below the top layer. You can play with z-indexing, but I believe that you will have to try and re-do your markup and CSS to get rid of the the absolute positioning.

Thank you! I've fixed it now yay!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.