When I hover the mouse over Committees the mega drop down aligns on the left with the blue box. But when I hover my mouse on Forms, the menu flying out of the blur box. Is there any way I can make sure the mega drop down doesn’t go outside the right of the blue box.
Due to the way you had to structure your HTML, it's extremely awkward. You could wrap everything in a wrapper, give that the width/height properties of the div that holds the dropdown, and overflow:hidden; that to cut it off, however you run into the risk of cutting off content in the dropdown once text gets resized.
To start, I'd scrap that dropdown version to be completely honest, and rewrite a standard dropdown that uses CSS (Js can be added to make the dropdown fade in/out) .