CSS flyout menu issue?

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.

Up vote 1 down vote favorite share g+ share fb share tw.

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 Home Capabilities Wire Harness & Cable Assemblies Electro Mechanical Assemblies On-Site Machine Shop FAcilities & Equipment listing Quality Assurance Computer Control System Process Control About Us Contact Us 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; } css link|improve this question edited Feb 5 at 2:03 asked Feb 5 at 1:41Dz. Slick818 77% accept rate.

It must be due to some other UL css .... everything is fine in this example: jsfiddle.net/NotInUse/H4SzB – Scott Feb 5 at 1:50.

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.

This is not a complete fix but it should get started. Make sure you apply a similar change where necessary. – Bruno Silva Feb 5 at 1:57.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.