text: Q:
  
  How to force jQuery dropdowns to full width?
  
  I've created a jQuery dropdown menu that shows DIVs on hover, but I cannot force the dropdown DIVs to have a 100% width across the page.
  CSS:
  ul.oe_menu div{
     position:absolute;
     top:103px;
     left:1px;
     background:#fff;
     width:200; /* This sets the width of the dropdown DIV */
     height:210px;
     padding:30px;
     display:none;
  }
  
  Take a look at the JS Fiddle to view the full code & expand the preview section to see the problem.
  Thanks!
  
  A:
  
  That is because if you set the div's width 100%, it is taking the 100% of its parent's width (the corresponding li).
  One solution for this is to set the div's position fixed so that it takes the width of the page when its width is set 100%.
  ul.oe_menu div{
     position:fixed;
     top:103px;
     left:0px;
     background:#fff;
     width:100%;
     height:210px;
     display:none;
  }
  
  This way you will have to remove the left:n from the divs. JS Fiddle here.
  To make the transition look more natural, you can consider doing .slideUp(200) [JS Fiddle here] or .animate({"opacity":0},{complete:function(){$(this).css("opacity","1")}}); [JS Fiddle here] asmouseleave.
  Hope this helps.
  
  