tabbed navigation in html
Hi, I'm using a simple tabbed navigation in html. Below is the simple code structure. It is working fine except that when I resize the window and make it smaller and smaller the tabs lies on top of each other. Ideally when the window size is smaller I would like to see only some of the tabs from left but not all lying on top of each other. How to fix this problem? Any help will be appreciated. <style type="text/css"> #tabs{ padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; font-weight:bold; } #tabs ul{ list-style:none; margin:90; padding:0; } #tabs ul li{ display:inline; margin:0; text-transform:capitalize; } #tabs ul li a{ padding:7px 16px; color:#FFF; background:#E7A272; text-decoration:none; border:1px solid #D17B40; border-left:0; margin:0; text-transform:capitalize; } #tabs ul li a:hover{ background:#EAEAEA; color:#7F9298; text-decoration:none; border-bottom:1px solid #EAEAEA; } #tabs ul li a.active{ background:#EAEAEA; color:#7F9298; border-bottom:1px solid #EAEAEA; } #content{ background:#FFFFF; clear:both; font-size:15px; color:#000; padding:20px; font-family:Arial, Helvetica, sans-serif; } </style> <div align="center" id='tabs'> <ul> <li><a href='#' class='active'>Summer School / Workshop</a></li> <li><a href='#'>Travel Information</a></li> <li><a href='#'>Venue</a></li> <li><a href='#'>Housing</a></li> <li><a href='#'>Registration</a></li> <li><a href='#'>Schedule</a></li> <li><a href='#'>Wiki</a></li> </ul> </div>