How to expand my CSS3 menu and reduce its width - html

Question

I was working on web project, then a requirement came that I should add a top-level menu to my site. So I did a search and I found a menu from this URL http://www.webdesignerdepot.com/2012/08/create-a-stunning-menu-in-css3/.
But when I added the required css files & font, then menu was displayed out of the layout as follow:-
So can anyone advise on how I can do the following :-
To expand the menu horizontally to cover the whole screen .as for the top blue-colored area.
to have it exeactly below the blue-colored top area.
Reduce the menu width, and have it same as the breadcrumb.
Thanks
the css for the menu is :-
.clearfix {
clear: both;
}
.wrap {
width: 940px;
margin: 4em auto;
}
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
}
.menu li {
float: left;
position: relative;
}
.menu li a {
color: #444;
display: block;
font-size: 14px;
line-height: 20px;
padding: 6px 12px;
margin: 8px 8px;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
/* Dropdown styles */
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
background: rgba(255,255,255,0.7);
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
}
/* Persistant Hover State */
.menu li:hover a {
background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
background-image: linear-gradient(#ccc, #ededed);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
.menu li:hover ul a {
background: none;
border-radius: 0;
box-shadow: none;
}
.menu li:hover ul li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}
#font-face {
font-family: 'IconicStroke';
src: url("~/fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("~/fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("~/fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
a.iconic:hover {
color:inherit;
}

Answer 1

My advice! Use firebug(an addon of firefox). Click on the menu and it will open all the css. Try changing them dynamically and chk the changes instantly. It even gives you the file where you need to make changes.
Apart from that what john said is right. Using fluid layout(%) is better than rigid(px). So when you say you need Menu to be of size of page then just make it 100%.
Happy Coding!