0

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
3
Views
7 Years
Discussion Span
Last Post by billysim1
0

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.

0

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!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.