Question

I have for like 2 hours tried to find out the problem with the fly-out menu on the home page of this link

When you hover over our capabilities link on the page it it fly’s out properly but the main background won’t stretch to accommodate the width I gave it while the hover does. The code are as shown below

HTML

<ul id="menu">
         <li><a href="index.php" class="current">Home </a></li>
         <li><a href="#">Capabilities </a>
           <ul class="innerul">
             <li><a href="quilt.html">Wire Harness & Cable Assemblies</a></li>
             <li><a href="quilting-services.html">Electro Mechanical Assemblies</a></li>
             <li><a  href="bags-&amp;-totes.html">On-Site Machine Shop</a></li>
             <li><a href="zombie-felties.html">FAcilities & Equipment listing</a></li>
             <li><a href="coming-soon.html"> Quality Assurance</a></li>
             <li><a href="coming-soon.html"> Computer Control System</a></li>
           </ul>
         </li>
         <li><a href="process-control.php">Process Control</a></li>
         <li><a href="about-us.php">About Us</a></li>
         <li><a href="contact-us.php">Contact Us</a></li>
       </ul>

CSS

#menu
{
        width: 100%;
        margin: 0;
        padding: 0px 0 0 0;
        list-style: none;

}

#menu li
{
    float: left;
    position: relative;
    width: 192px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
    margin: 0px;
    text-align: center;
}



#menu a
{
        float: left;
        height: 25px;
        text-align: center;
        width: 192px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px Arial, Helvetica;
        text-decoration: none;

}

#menu .innerul li li:hover > a
{
    color: #fafafa;
    width: 250px;
}

*html #menu li a:hover /* IE6 */
{
        color: #fafafa;
}

#menu li:hover > ul
{
    width: 250px;
        display: block;


}

/* Sub-menu */

#menu li .innerul
{
    list-style: none;
    width: 250px;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 99999;
    background: #192833;
    background: -moz-linear-gradient(#1f323f, #192833);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #192833));
    background: -webkit-linear-gradient(#1f323f, #192833);
    background: -o-linear-gradient(#1f323f, #192833);
    background: -ms-linear-gradient(#1f323f, #192833);
    background: linear-gradient(#1f323f, #192833);
    -moz-border-radius: 5px;
    border-radius: 5px;
}



#menu li .innerul li
{
    float: none;
    width: 250px;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #010101, 0 2px 0 #2b4253;
    -webkit-box-shadow: 0 1px 0 #010101, 0 2px 0 #2b4253;
    box-shadow: 0 1px 0 #010101, 0 2px 0 #2b4253;
}

#menu li .innerul li:last-child
{
    width: 250px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu li .innerul li a
{
    width: 250px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
        height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
        text-transform: none;
}

*html #menu ul a /* IE6 */
{
        height: 10px;
        width: 192px;
}

*:first-child+html #menu ul a /* IE7 */
{
        height: 10px;
        width: 192px;
}

#menu li .innerul li a:hover
{
    background: #0186ba;
     width: 250px;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu li .innerul li:first-child a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    width: 250px;
}

#menu li .innerul li:first-child a:after
{
    content: '';
    position: absolute;
     width: 250px;
    left: 30px;
    top: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #1f323f;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;

}

#menu ul li:last-child a
{
     width: 192px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after
{
     width: 192px;
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
 #left {
    float: left;
    width: 700px;
    margin-right: 20px;
    height: auto;
    margin-bottom: 25px;
    margin-top: 0px;
}
#rack #header #navbar #menu li .innerul {
    margin: 0px;
    padding: 0px;
}

Answer 1

Your top menu CSS rule is more specific than the inner one. Change #rack #header #navbar ul to #rack #header #navbar > ul to make sure this rule gets only applied to the top menu.

Also increase your 250px width to 350px to make sure you have enough room for the text.