bootstrap 100% width menu

by ravimallya

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">
    <div class="row">
			<div class="span12">
				<ul class="menu">
					<li class="menu-start"><a href="../index.html">Home</a></li>
					<li><a href="#">Solar Images</a></li>
					<li class="active"><a href="#">News</a></li>
					<li><a href="#">Research</a></li>
					<li><a href="#">Data Online</a></li>
					<li><a href="#">Web Resources</a></li>
					<li><a href="#">Outreach</a></li>
					<li class="menu-end"><a href="#">About</a></li>
				</ul>
			</div>
		</div>
</div>

CSS

/* ------------------- menu: main menu  ------------------ */
.menu {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 35px;
	margin: 0;
	list-style-image: none;
	list-style-type: none;
}

.menu li {
	display: table-cell;
	margin: 0;
	text-align: center;
	border-top: 1px solid #ddd; border-bottom: 1px solid silver;
	border-left: 1px solid silver; border-right: 1px solid white;
	background: #ddd; /* other browsers */
	background: -moz-linear-gradient(top, #ffffff -20%, #ddd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(-20%, #ffffff), color-stop(100%, #ddd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff -20%, #ddd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff -20%, #ddd 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff -20%, #ddd 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff -20%, #ddd 100%); /* W3C */
}

.menu li:hover, .tabmenu li a:hover {
	border-right: 1px solid #ddd;
	background: silver;
	background: -moz-radial-gradient(center, ellipse cover, #fcfcfc 0%, #e3e3e3 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcfcfc), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, #fcfcfc 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, #fcfcfc 0%,#e3e3e3 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, #fcfcfc 0%,#e3e3e3 100%); /* IE10+ */	
}
.tabmenu li.menu-start a:hover { border-radius: 7px 0 0 7px; } /* tabmenu: tabs menu */
.tabmenu li.menu-end a:hover { border-radius: 0 7px 7px 0; }
.tabmenu li a:focus { outline: none; }

.menu li a {
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 9px;
	padding-bottom: 8px;
	font: bold 12px sans-serif;
	color: #5c5c5c;
	text-decoration: none;
	text-shadow: 0 1px...