Untitled

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

a.underbar-tag0 {
    display: block;
    width: 90px;
    height: 32px;
    float: left;
    color:#000;
    background-image: url(../../Root/buy_blue.png);
        background-repeat: no-repeat;
    background-position: 0px 0px;
    margin-right: 0px;
    padding-top: 9px;
    padding-left: 40px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 80px;
    font-weight: bold;
}
a.underbar-tag0:hover {
    color:#9C0;
    background-image: url(../../Root/buy_blue.png);
    background-repeat: no-repeat;
    background-position: 0px -45px;
}
a.underbar-tag1 {
    display: block;
    width: 114px;
    height: 32px;
    float: left;
    color:#000;
    background-image: url(../../Root/benefits_blue.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin-right: 40px;
    padding-top: 9px;
    padding-left: 78px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-left: 60px;
}
a.underbar-tag1:hover {
    color:#FFF;
    background-image: url(../../Root/benefits_blue.png);
    background-repeat: no-repeat;
    background-position: 0px -45px;
}
a.underbar-tag2 {
    display: block;
    width: 122px;
    height: 32px;
    float: left;
    color:#000;
    background-image: url(../../Root/help_blue.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin-right: 40px;
    padding-top: 9px;
    padding-left: 70px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-left: 40px;
}
a.underbar-tag2:hover {
    color:#FFF;
    background-image: url(../../Root/help_blue.png);
    background-repeat: no-repeat;
    background-position: 0px -45px;
}
a.underbar-tag3 {
    display: block;
    width: 120px;
    height: 32px;
    float: left;
    color:#000;
    background-image: url(../../Root/kostnad_blue.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin-right: 40px;
    padding-top: 9px;
    padding-left: 72px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-left: 40px;
}
a.underbar-tag3:hover {
    color:#FFF;
    background-image: url(../../Root/kostnad_blue.png);
    background-repeat: no-repeat;
    background-position: 0px -45px;
}
.popup {
    position: absolute;
    display: none;
    z-index: 50;
    border-collapse: collapse;
    background-image: url(../../Root/recommended.png);
        height: 191px;
    width: 150px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    float: left;
}

</style>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    <!--

    $(function () {
        $('.underbar').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.underbar-tag0', this);
            var info = $('.popup', this).css('opacity', 0);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    info.css({
                        top: 20,
                        left: 0,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });

                }, hideDelay);

                return false;
            });
        });
    });

    //-->
</script>

</head>

<body>

<div class="bg"></div>

<div class="underbar">

  <div>
  <a href="" class="underbar-tag0">Köp nu</a>
  </div>

  <table id="dpop" class="popup"></table>

  <a href="" class="underbar-tag1">Fördelar</a>

  <a href="" class="underbar-tag2">Nybörjare?</a>

  <a href="" class="underbar-tag3">Kostnad</a>

</div>

</body>

</html>