Thank you for your reply but keep in mind that I'm trying to work with the existing CSS. You created your own CSS for your demo and that's not really helping me. In my first post above, at the link, there is a "style2.css" file that contains the following code for the main menu. Again, I appreciate your reply but I have to work with the code below to figure out how to make the "main-menu" stretch to the edges of the white wrapper:
/*-------------------------------------------*
/* Menu Navigation
/*-------------------------------------------*/
#main-menu .act {
height: 24px;
width: 24px;
}
#main-menu .menu ,
#main-menu .menu * {
margin: 0;
padding: 0;
list-style: none;
}
#main-menu .menu {
line-height: 1.0;
}
#main-menu .menu ul {
position: absolute;
top: -999em;
}
#main-menu .menu ul li {
width: 100%;
}
#main-menu .menu li a {
margin-bottom: 10px;
height: 18px;
}
#main-menu .menu li li a {
margin-bottom: 0px;
}
#main-menu .menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
#main-menu .menu li {
float: left;
position: relative;
}
#main-menu .menu a {
display: block;
position: relative;
}
#main-menu .menu li:hover ul {
left: 0;
top: 3em; /* match top ul list item height */
z-index: 99;
}
#main-menu ul.menu li:hover li ul {
top: -999em;
}
#main-menu ul.menu li li:hover ul {
left: 10em; /* match ul width */
top: 0;
}
#main-menu ul.menu li li:hover li ul {
top: -999em;
}
#main-menu ul.menu li li li:hover ul {
left: 10em; /* match ul width */
top: 0;
}
#main-menu .menu {
float: left;
}
#main-menu .menu a {
background: #beb495 url("/main-images/menu-gradient.png") repeat-x;
padding-top: 1.0em;
padding-right: 45px;
padding-bottom: 11px;
padding-left: 10px;
text-decoration: none;
color: #3d4244;
text-transform: none;
}
#main-menu .menu .menu a {
color: #3d4244;
text-transform: none;
}
#main-menu .menu a.active {
color: #000000;
}
#main-menu .menu a:focus,
#main-menu .menu a:hover,
#main-menu .menu a:active {
color: #3d4244;
background: #e8dfc6;
text-decoration: underline;
}
#main-menu .menu a.active {
color: #000 !important;
background: #beb495 url("/main-images/menu-gradient.png") repeat-x;
}
#main-menu .menu a.active-trail {
color: #000000;
}
#main-menu .menu li ul {
border-top: 4px solid #01ace4;
min-width: 10em;
right: -10px;
}
#main-menu .menu li li {
background: #fff;
border-bottom: 1px solid #cccccc;
}
#main-menu .menu li li li {
background: #fff;
}
#main-menu .menu ul a {
padding: .75em 1.2em;
}
#main-menu .menu li.last a {
border-right: none;
}