How to apply float property for tabs?

I have designed a html tabs. I applied float property to it. The problem is when I minimize browser tabs are not visible properly. Here the my fiddle:

http://jsfiddle.net/raghavendram040/vn1Leuq3/

and JavaScript is copied from Internet so can any one tell how this JavaScript works and applying float property? It really helps me. Here is JavaScript code:

tabs = function(options) {

var defaults = {  
    selector: '.tabs',
    selectedClass: 'selected'
};  

if(typeof options == 'string') defaults.selector = options;
var options = $.extend(defaults, options); 

return $(options.selector).each(function(){
                            
    var obj = this; 
    var targets = Array();

    function show(i){
        $.each(targets,function(index,value){
            $(value).hide();
        })
        $(targets[i]).fadeIn('fast');
        $(obj).children().removeClass(options.selectedClass);
        selected = $(obj).children().get(i);
        $(selected).addClass(options.selectedClass);
    };

    $('a',this).each(function(i){   
        targets.push($(this).attr('href'));
        $(this).click(function(e){
            e.preventDefault();
            show(i);
        });
    });
    
    show(0);

});         
}tabs('nav ul');

Answer

Supress from nav and ul

height: 28px;

Add

overflow: auto;

To your ul element. That will prevent your tab links to disapear. If you want them to stay in a line, you will need to set to your ul element min-width property like this:

min-width: 800px;

Advertisement

Answer