Jquery hover and toggle functions are not working in IE6?

This custom slider works fine in all the other browsers, but IE6/possibly 7 are being a pain as usual. As much as I'd like to use a premade slider, it is not an option.

Here's the main code:

$(document).ready(function() {

//Slider Movement

    //Slide 1
    $(".hpsnav1").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-40px",
        }, 1000 );
    });
    //Slide 2
    $(".hpsnav2").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-744px",
        }, 1000 );
    });
    //Slide 3
    $(".hpsnav3").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-1448px",
        }, 1000 );
    });
    //Slide 4
    $(".hpsnav4").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-2152px",
        }, 1000 );
    });
    //Slide 5
    $(".hpsnav5").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-2860px",
        }, 1000 );
    });

// Slide Previews

    $(".hpsnav1").live('hover', function() {
        $(".prvw1").toggle();
    })
    $(".hpsnav2").live('hover', function() {
        $(".prvw2").toggle();
    })
    $(".hpsnav3").live('hover', function() {
        $(".prvw3").toggle();
    })
    $(".hpsnav4").live('hover', function() {
        $(".prvw4").toggle();
    })
    $(".hpsnav5").live('hover', function() {
        $(".prvw5").toggle();
    })

});

Here is the HTML:

<div class="slider-wrap">
  <div class="slider-nav">
    <ul class="slider-nav-options">
      <li class="hpsnav1">1</li>
      <li class="hpsnav2">2</li>
      <li class="hpsnav3">3</li>
      <li class="hpsnav4">4</li>
      <li class="hpsnav5">5</li>
    </ul>
    <div class="slider-preview prvw1">Preview 1</div>
    <div class="slider-preview prvw2">Preview 2</div>
    <div class="slider-preview prvw3">Preview 3</div>
    <div class="slider-preview prvw4">Preview 4</div>
    <div class="slide开发者_JS百科r-preview prvw5">Preview 5</div>
  </div>
  <ul class="slider-list">
    <li style="background:#066;" class="firstslide hps1"></li>
    <li style="background:#960;" class="hps2"></li>
    <li style="background:#3CC;" class="hps3"></li>
    <li style="background:#639;" class="hps4"></li>
    <li style="background:#9FF;" class="hps5"></li>
  </ul>
</div>

Here's the main stylesheet:

.slider-wrap {
    margin:0;
    width:704px;
    height:313px;
    overflow:hidden;
    background:#F00;
}
.slider-list {
    margin:-67px 0 0 -40px;
    width:4000px;
    height:271px;
    list-style:none;
    background:#06F;
}
.slider-list .firstslide {
    margin-left:0;
}
.slider-list li {
    margin:0 0 0 -8px;
    width:708px;
    height:271px;
    position:relative;
    display:inline-block;
    top:0px;
}
.hps1 {background:#0F0;}
.hps2 {background:#093;}
.hps3 {background:#0CC;}
.hps4 {background:#66C;}
.hps5 {background:#F63;}

.slider-nav {
    margin:0;
    width:704px;
    height:47px;
    background:#f8d824;
    position:relative;
    top:250px;
}
.slider-nav-options li {
    display:inline;
    cursor:pointer;
    position:relative;
    top:13px;
}
.slider-preview {
    width:460px;
    height:20px;
    position:relative;
    left:220px;
    top:-24px;
    display:none;
    text-align:center;
}

Here's the IE6 stylesheet:

@charset "utf-8";
/* New Slider - IE6 */

    .slider-wrap {
        position:relative;
        margin:0;
        width:704px;
        height:313px;
        background:#F00;
        overflow:hidden;
    }
    .slider-list {
        margin:-47px 0 0 -4px;
        width:4000px;
        height:271px;
        list-style:none;
        background:#06F;
        overflow:hidden;
    }
    .slider-list .firstslide {
        margin-left:2px!important;
    }
    .slider-list li {
        margin:0 0 0 -8px;
        float:left;
        width:712px;
        height:266px;
        position:relative;
        display:inline-block;
        top:0px;
    }
    .hps1 {background:#0F0;}
    .hps2 {background:#093;}
    .hps3 {background:#0CC;}
    .hps4 {background:#66C;}
    .hps5 {background:#F63;}

    .slider-nav {
        margin:0;
        width:704px;
        height:47px;
        background:#f8d824;
        position:relative;
        top:266px;
    }
    .slider-nav-options li {
        display:inline;
        cursor:pointer;
        position:relative;
        top:13px;
    }
    .slider-preview {
        width:460px;
        height:20px;
        position:relative;
        left:220px;
        top:-24px;
        display:none;
        text-align:center;
    }

You should use this:

<script>
if ($.browser.msie==true) {
alert("Stop using IE. It's a terrible web browser.");
}

However, if you actually don't find an answer, you can just say this website isn't compatible with IE.