I am using a javascript expandable vertical menu with CSS on a site under development ( www.testplace.co.uk). My problem is that the top level menu is only underlined on mouse-over if there is a direct link to another page from that level. However, I want users to see that the menu is expandable EVEN IF there is no direct link from that level when they mouse-over on it.
The java code for the second set of menus is:
<dt onclick="javascript :show('smenu2');">Consultants</dt>
<dd id="smenu2">
<ul>
<li><a href="briantowers.php">Brian Towers </a></li>
<li><a href="janetoplis.php">Jane Toplis </a></li>
</ul>
</dd>
And the CSS governing the presentation of the menu is:
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 0px solid gray;
background: #d8d8d7;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: left;
background: #d8d8d7;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu a:hover, #menu dt a:hover {
background: #d8d8d7;
color: #1D6D99;
text-decoration: underline;
}
What do I need to add in CSS or Java to get the unlinked 'Consultants' to underline and change colour on mouse-over?
KB |
