PDA

View Full Version : Switch Menu - a:hover not responding when converted to list format



nc78
05-24-2005, 03:09 PM
Hi,

I am trying to convert the switch menu to a list so that when I use the a:hover it changes the color of the complete row not just the background of the linked text. I thought this should be relatively straightforward but I can't get the a:hover to respond. When I apply a class directly to the <li> tag, the link becomes hidden.

I am open to suggestions on how to achieve my results by not listing the links in <li> tags (I do not want to use images).

This is the original block of code:



<div class="menutitle" onclick="SwitchMenu('sub3')">
Feature Columns
</div>
<span class="submenu" id="sub3">
<a href="#">Letter from Latin America</a><br>
<a href="#">Newt Utopia</a><br>
<a href="#">Insider Talking</a><br>
<a href="#">Stock Round-Up</a><br>
<a href="#">Standard & Poor's</a><br>
</span>


I am looking to do something along the lines of:


<div class="menutitle" onclick="SwitchMenu('sub3')">Feature Columns</div>
<span class="submenu" id="sub3">
<ul>
<li><a href="#">Letter from Latin America</a></li>
<li><a href="#">Newt Utopia</a></li>
<li><a href="#">Insider Talking</a></li>
</ul>
</span>


CSS



.menutitle {
position:relative;
list-style: none;
cursor:pointer;
padding: 2px;
background-color:#555;
color:#ffffff;
font-size:.8ems;
font-weight:bold;
/*/*/border-bottom:1px solid #777;/* */
}

.submenu {
margin-bottom: 0;
background-color:#eee;
color:#555;
}
.submenu ul, {
margin-bottom: 0;
color:#555;
}
.submenu li {
margin-bottom: 0;
color:#555;
}
.submenu li a{
color:#555;
text-decoration:none;
width:145px;
display:block;
height:1%;
}
.submenu li a:hover{
background-color: #b22222;
color: #FFFFFF;
width:145px;
}
.submenu li a:active{
background-color: #b22222;
color: #FFFFFF;
width:145px;
}
.submenu li a:visited{
background-color: #b22222;
color: #FFFFFF;
width:145px;
}

nc78
05-24-2005, 03:20 PM
I have resolved the issue - I had the menu residing in a nested div tag that had css overriding the switch menu's css - duh :eek: