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!
