Question

I’m currently working on http://www.simco2.siteprogression.com/about-us.php and I’m having a display issue with the Fly-out menu and the YouTube video that’s on the page. When you hover over “Capabilities” link, half of the menu displays under the video in IE and Google Chrome. The CSS for the menu is as shown below.

#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 11px/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: 300px;
    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: 300px;
    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;
    text-align: left
}

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

#menu li .innerul li a
{
     width: 300px;
    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: 300px;
}

#menu li .innerul li a:hover
{
    background: #0186ba;
        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: 300px;
}

#menu li .innerul li:first-child a:after
{
    content: '';
    position: absolute;
     width: 300px;
    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: 300px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after
{
     width: 300px;
        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;
}

Answer 1

In the video embed code, add a parameter “wmode” and set it to “transparent”.