Tabs and hidden content

I’ve tried everything, researched and tooled around but I really don’t know CSS that well. I’m trying to have the headings stay the same width then have a transition drop down that has a description but expands wider than the heading section. Something like the example below, but to show and hide content on hover instead of on click.

The example HTML:

<div class="tabContainer" >
  <ul class="digiTabs" id="sidebarTabs">
    <li id="1" class="selected t">Overview</li>
    <li id="2" class="t">Itinerary</li>
    <li id="3" class="t">Destination Info</li>
  </ul>
  <div id="t1" style="display:none;" class="tabContent">...</div>    
  <div id="t2" style="display:none;" class="tabContent">...</div>  
  <div id="t3" style="display:none;" class="tabContent">...</div>
</div>

The example CSS:

.tabContainer {margin: 0;}
.tabContainer .digiTabs {
    list-style: none;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0px;
    position: relative;
    top: 1px;
}
.tabContainer .digiTabs li {
    float: left;
    background-color: #e7e5df;
    padding: 5px 15px!important;
    cursor: pointer;
    border-bottom:none;
    margin-right: 1px;
    color: #801350;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.tabContainer .digiTabs .selected {
    background-color: #fff;
    color: #393939;
    border-left: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}
#tabContent {
    padding: 10px;
    background-color: #fff;
    overflow: hidden;
    float: left;
    margin-bottom: 10px;
    border: 1px solid #e1e1e1;
}

The example JS:

$(function(){
    $(".t").bind("click",function(){
        $(".tabContent").each(function(){
            $(this).hide();
        });
        var id = $(this).attr("id");
        $("#t"+id).show();
    });
});

http://jsfiddle.net/NIkhar/NRkL9/2/

Any help would be appreciated.

try that fiddle
you don’t need to use each, and I’ve added selected class handler

$(function(){

        $(".t").hover(function(){
            $(".tabContent").hide();
            $('.t').removeClass('selected');
            $(this).addClass('selected');
        var id = $(this).attr("id");
            $("#t"+id).show();
        });

});

Just change this code:

$(function(){
    $(".t").bind("click",function(){
        $(".tabContent").each(function(){
            $(this).hide();
        });
        var id = $(this).attr("id");
        $("#t"+id).show();
    });
});

Into this:

$(function(){
    $(".t").hover(function() { /* ONLY THIS LINE HAS CHANGED */
        $(".tabContent").each(function(){
            $(this).hide();
        });
        var id = $(this).attr("id");
        $("#t"+id).show();
    });
});