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!

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.

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.