2 Replies Latest reply on Mar 20, 2010 3:04 PM by salli4th

    How to get a CSS list navigation hover working as needed?

    salli4th

      I'm at an impasse with a left navigation. I thought it was ok, then realized the whole buttons weren't selectable, only the text. And the hover is not working right. It looks right when you hover over the text, but not when you're off to the side of it. What's under the text is the normal state "showing through". Being very new at this I could sure use the help and learn from it, too. Thanks in advance! Please let me know if you need more info.

       

      Regards,

      Sal

       

      URL: http://www.sallyaverill.com/bom/

       

      css for the nav:

       

      .navdiv {
        width: 200px;
        height: 590px;
        float: left;
      }

      .leftnavigation {
      width: 192px;
      margin: 70px 0px 0px 0px;
      padding-left: 8px;
      /* float: left; */
      list-style-type: none;
      }

      .leftnavigation a, .leftnavigation li{
      margin-left: 0px;
      width: 171px;
      padding-left: 0px;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      /* float: left; */
      color: #392F9D;
      font-size: 10px;
      font-weight: bold;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      background-image: url(images/nav_normal.jpg);
      background-repeat: repeat-x;
      background-position: 0px 0px;
      }

      .leftnavigation li {
      float: left;
      background: url(images/nav_normal.jpg) top left no-repeat;
      border-bottom: 1px solid #999;
      line-height:150%;
      padding-left: 10px;
      }

      .leftnavigation li:visited {
      color:#66C;
      }

      .leftnavigation li:hover {
      color:#fffff;
      background-image: url(images/nav_down.jpg);
      }

      .leftnavigation a:visited {
      color: #66C;
      }
      .leftnavigation a:hover {
      color: #ffffff;
      background-image: url(images/nav_down.jpg);
      }