CSS - Set div width equal to that of its "great-grandparent"

Question

I have found that setting the width of a div to 100% will make it's width the same as its parent but is it possible (maybe using CSS selectors) to set it equal to a parent 3 levels above? I am trying to make a mega menu like this: http://www.thenorthface.com/en_US/index.html where I am trying to make the div the same size as the nav bar.

I have also tried just using class names and using javascript to set the div width. There are no errors in the console so I think my CSS might be overriding it although I have no set width values.

var navbarwidth = document.getElementById('nav-width').offsetWidth;
var megadropdown = document.getElementById('menu1');
megadropdown.style.width = navbarwidth; 

Answer 1

Why not just put the div inside of its great grandparent and then open it with javascript?

i.e.

<nav-bar>
   <drop-downs>
       <drop-down-1>
       <drop-down-2>
   </drop-downs>
   <menus>
       <menu-item1>
       <menu-item2>
   </menus>
</nav-bar>

And make it so that when drop-down-1 is clicked, it displays menu-item-1