It can't work with the current setup.
You've set #header-content-wrapper out of the #header. And since they overlap, you of course want the #header-content-wrapper to be over the #header. So you set z-index to 10 and 2 respectively. And that's ok.
But since div.menu is child of #header, you can set it's z-index to 1000000 if you want, it will still go under #header-content-wrapper, because its z-index is larger than that of #header.
Parent-child relationship and their position in the DOM play a part also. And so to save yourself the headache, just recode it so that #header-content-wrapper goes under div.menu.