I'm doing a javascript-less submenu hover, and am having troubles getting links within a link, When I use:
<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
text-align: left;
padding-top: 5px;
font-size: 12px;
width: 300px;
margin: 0px auto;
}
#nav a {
display: block;
padding: 4px 0 6px 25px;
line-height: 14px;
border-bottom: 1px solid black;
}
#nav li {
text-align: left;
color: #452f51;
text-decoration: none;
cursor: pointer;
}
#nav li:hover a {
color: #b15619;
text-decoration: none;
}
a.hoverable {
position: relative;
cursor: pointer;
color: black;
text-decoration: none;
}
a.hoverable div {
position: absolute;
display: none;
top: 1.0em;
left: 0.5em;
margin: 0em;
padding: 6px 5px;
background-color: #333333;
border: 1px solid white;
color: white;
margin-left: -110px;
margin-top: 10px;
}
a.hoverable:hover div {
display: block;
}
.hoverable a, .hoverable a:link, .hoverable a:visited {
color: white;
}
</style>
<ul id='nav' class='nav'>
<li><a href='?page=1'>1</a></li>
<li><a href='?page=2'>2</a></li>
<li class='notnormal'>
<a href='?page=3' class='hoverable'>3
<div class='hiddenlayer'>
<!--<a href='?page=a'>-->a<!--</a>-->
<!--<a href='?page=b'>-->b<!--</a>-->
<!--<a href='?page=c'>-->c<!--</a>-->
<!--<a href='?page=d'>-->d<!--</a>-->
</div>
</a>
</li>
<li><a href='?page=4'>4</a></li>
<li><a href='?page=5'>5</a></li>
</ul>
I get the following (when hovering over "3"):
Which is good. But when I uncomment links for a, b, c & d, the result is
I've tried everything over the past two days to change a-d's classes so they don't fall under #nav li a when there's a link, but I can't wrap my head around this..
Please help,
