StackOverflow: Fancy Menu using CSS3 and jQuery

An adaption of the menu found at http://blog.insicdesigns.com/2010/02/creating-a-fancy-menu-using-css3-and-jquery/ http://stackoverflow.com/questions/5859948/fake-automate-a-hover-in-javascript-jquery

HTML

<div class="lavalamp dark" >
    <ul>
        <li class="active"><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contacts</a></li>
        <li><a href="">Back to Article</a></li>
        <li><a href="">How it Works?</a></li>
    </ul>
    <div class="floatr"></div>
</div>

<div class="lavalamp" >
    <ul>
        <li><a href="">Home</a></li>
        <li class="active"><a href="">About</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contacts</a></li>
        <li><a href="">Back to Article</a></li>
        <li><a href="">How it Works?</a></li>
    </ul>
    <div class="floatr"></div>
</div>



<table id='schedule11' class='schedule' border="0">
    <thead>
        <tr>
            <th>date</th> 
            <th>time</th> 
            <th>place</th> 
            <th>town</th> 
            <th>state</th> 
            <th>contact info</th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td>January 15</td> 
            <td>6:00pm</td> 
            <td>Ranlo Baptist Church, 1517 Spencer Mountain Road</td> 
            <td>Ranlo</td> 
            <td>NC</td> 
            <td>704.824.1146</td> 
        </tr> 
        
        <tr> 
            <td>January 16</td> 
            <td>9:30am</td> 
            <td>Cornerstone Bible Church, 1372 Lyman Reece Rd</td> 
            <td>Lancaster</td> 
            <td>SC</td> 
            <td>803.286.5470</td> 
        </tr> 
        
        <tr> 
            <td>January 16</td> 
            <td>6:00pm</td> 
            <td>Community Baptist Church, 823 Dallas Stanley Highway</td> 
            <td>Dallas</td> 
            <td>NC</td> 
            <td>704.922.3426</td> 
        </tr>
    </tbody>
</table>

CSS

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
}



ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

ul li {
    list-style: none;
    float:left;
    
    text-align: center;
}

ul li a {
    padding: 0 20px;
    text-align: center;
}



.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}



table.schedule {
    /* this rule is just for this page to give some room between the header */   
    margin-top:1em;
}

table.schedule {
    border-collapse:collapse;
    border-spacing:0;
}
table.schedule th {
    background:#CDEBCE;
    padding:.5em 1em;
}
table.schedule td {
    padding:.2em .4em;
}
table.schedule tbody tr:nth-child(even) td {
    background:#E7F6CA;
}
table.schedule tbody tr:hover td {
    background:#BAD4AE;
}

JavaScript

(function($) {
    //this plug-in is taken from http://blog.insicdesigns.com/2010/02/creating-a-fancy-menu-using-css3-and-jquery/
    //however, it has some bugs which this fixes.
    var active = "active",
        lavalamp = "lavalamp";

    $('.floatr').each(function() {
        var $this = $(this),
            $parent, $active;
        $parent = $(this).closest('.' + lavalamp);
        $active = $parent.find('li.' + active);

        $this.css({
            "left": $active.offset().left - $parent.offset().left + "px",
            "width": $active.width() + "px"
        });
    });

    $('.' + lavalamp).delegate('li', 'mouseenter mouseleave click', function(e) {
        var type = e.type,
            $this = $(this),
            left, width;

        if (type === 'mouseenter') {
            left = $this.offset().left - ($this.closest('.' + lavalamp).offset().left);
            width = $this.width() + "px";

            $this.closest('ul').next('div.floatr').css({
                "width": width,
                "left": left + "px"
            });

        } else if (type === 'mouseleave') {

            left = $this.siblings('li.active').offset().left - ($this.closest('.' + lavalamp).offset().left);
            width = $this.siblings('li.active').width();

            $this.closest('ul').next('div.floatr').css({
                "width": width + "px",
                "left": left + "px"

            });

        } else if (type === 'click') {
            $this.addClass(active).siblings('li').removeClass(active);

            //you probably do not want to return false.  This prevents the links from working.
            return false;
        }

    });

}(jQuery));