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:
I am looking to do something along the lines 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>
CSSCode:<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>
Code:.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; }



Reply With Quote

Bookmarks