Link to home
Start Free TrialLog in
Avatar of flynny
flynnyFlag for United Kingdom of Great Britain and Northern Ireland

asked on

problem with a:hover in ie 8?

Hi all i have a nav menu in my page.

the css works fine in firefox, etc but in ie8 the following class isn't working?? any ideas why?

#nav
{
    position: relative;
    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    height:50px;
    background-image:url('../images/nav_bg.png');
    background-repeat:repeat;
    cursor:pointer;
}

#nav ul
{
    float:left;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    width:120px;
}

#nav li
{
    margin:0;
    padding:0;
}

#nav a
{
    -x-system-font:none;
    border-left:solid 1px #CCCCCC;
    color:#555555;
    display:block;
    font-family:sans-serif,arial;
    font-size:14px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    margin:0;
    padding:17px 5px 17px 5px;
    text-align:center;
    text-decoration:none;
}

#nav .logo
{
    float:left;
    padding: 0 0 0 10px;
    border:none;
    width:210px;
}

#nav ul a:hover:not(.logo)
{
    position: relative;
    border-left:solid 1px #666666;
    background-color:#000000;
    background: url('../images/nav_bg_mouse_over.png');
    background-repeat:repeat-x;
    color:#666666;
}

#nav ul ul
{
    display:none;
    border-top:solid 1px #666666;
    border-bottom:solid 1px #666666;
    background-color:#666666;
    background: url('../images/nav_bg.png');
    background-repeat:repeat-x;
}

#nav ul li:hover ul
{
    display: block;
}

#nav ul ul:hover
{
    border-right:solid 1px #666666;
}


html is

  <div id="nav">

    <div class="logo" onclick="window.location = 'index.asp'">
      <img src="./images/logo_small.png" alt="Home"/>
    </div>

    <ul>
      <li>
        <a href="personal.asp">Personal</a>

        <ul>
          <li>
            <a href="faqs.asp">FAQ's</a>
          </li>
        </ul>

      </li>
    </ul>

    <ul>
      <li>
        <a href="cost.asp">Costing</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="about_us.asp">about us</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="civil.asp">Civil</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="infant.asp">Infant</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="contact.asp">Contact Us</a>
      </li>
    </ul>

  </div>
ASKER CERTIFIED SOLUTION
Avatar of ludofulop
ludofulop

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi,

Can we have the link.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of flynny

ASKER

great thank you the link you provided showed this.

it wasd the not() in the css.