Results 1 to 2 of 2

Thread: Switch Menu - a:hover not responding when converted to list format

  1. #1
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Switch Menu - a:hover not responding when converted to list format

    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:

    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:
    Code:
    <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

    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;
    }

  2. #2
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Problem solved.

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •