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>
flynnyAsked:
Who is Participating?
 
ludofulopCommented:
i presume that it's because of the css3's :not, which is not well supported yet... remove it and change the .logo class instead
0
 
techsathishCommented:
Hi,

Can we have the link.
0
 
asafadisCommented:
@ludofulop is orrect.

Run this test in all your browsers... it should  shed some light, as well as break your heart!
http://www.css3.info/selectors-test/test.html
0
 
flynnyAuthor Commented:
great thank you the link you provided showed this.

it wasd the not() in the css.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.