当变量添加到clean url时，Mega Menu CSS布局无法正常工作

Question

I have been working on a site for the past 5 years and recently added a mega menu to the development pages (eg. Sandbox pages)

The mega menu that is being used can be seen here: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

The menu works superb with the template pages, when the actual urls are used, and when the clean urls are used with no variables. When variables are used the CSS/CSS3 doesn't seem to load.

I also tried this with the menu as two separate files (one for within the tags and one for the tags. It made no impact on this particular situation.

The only abnormal alterations that have been done is that the menu has been made into a php file and is added to the pages of the sandbox using "include".

I have tried to figure this out, but am at a loss. By my deduction it is something with the .htaccess mask when adding variables and the menu that are conflicting, but I am not sure where the conflict it. The "mask" for the clean urls has been in place for 4 years and this is the first time that I have had any level of conflict like this, so that leaves me with the issue of the menu.

If anyone prefer me to put up sample code I can do that, but I didn't think that it was needed as this seems to be centered on the menu itself, but is visible in the link above.

To everyone that reads this, thank you for the time and the energy in helping with this.

Answer 1

I figured out the problem and the solution. The solution is actually pretty simple.

When using a mask through .htaccess and also html5/CSS3 there is one standard that is being enforced by the code. I am guilty of being lazy when I put js, css, and imag paths in and do them similar to includes. From what I have uncovered you can't do them the same. (With includes I never start the path with a "/", but with cs, js, and images you have to start the path with a "/" when you have a htsccess mask in place. That is generally the rule, and CSS3/HTML have enforced this rule.

I added a / to all css and images and everything works fine.

For those of you that prefer literal code I here are 2 examples so that you can see what I mean:

Works: img src="/img/ME3.png" style="border="0" alt="" Broke: img src="img/ME3.png" style="border="0" alt=""

Works: href="/megamenu/menu.css" type="text/css" media="screen" Broke: href="megamenu/menu.css" type="text/css" media="screen"

Personally, I feel incredibly stupid for not catching this, but I did learn something new in the process. I guess that is where that saying "there are no stupid questions" applies.