title: CSS Flyout menu gets cut off by borders of its container in IE9
body: <p>I have a flyout menu that (of course) looks great in FF/Chrome, but in IE, it's choking.  I have a complete example up on JS Fiddle: <a href="http://jsfiddle.net/JXw3S/4/" rel="nofollow">http://jsfiddle.net/JXw3S/4/</a></p>
  
  <p>If you hover over the second 2 menu items, there should be a flyout menu there.  However, in IE, it seems as though its getting cut off by the borders of the #primaryMenu container.</p>
  
  <p>In case JSFiddle is unavailable, here is my code: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;menu id="primaryMenu"&gt;
      &lt;ul&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;span&gt;FMS&lt;/span&gt;&lt;/a&gt;&lt;div class="arrow"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Project Accounts&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Non-Project Accounts&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;DocID Log&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gift Card Tracking&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PO/Account Reference&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Speedkey Reference&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Personel&lt;/span&gt;&lt;/a&gt;&lt;div class="arrow"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Payroll&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Report&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Analysis&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Manage&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PI/Project Effort&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Facilities&lt;/span&gt;&lt;/a&gt;&lt;div class="arrow"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Manage&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;a href="#" id="primaryMenuCollapse"&gt;&lt;span&gt;Collapse Menu&lt;/span&gt;&lt;/a&gt;
  &lt;/menu&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#primaryMenu{display:block;position:fixed;left:0px;top:132px;z-index:90;padding:40px 0 0;margin:0;width:200px}
  #primaryMenu ul{padding:0;margin:0;list-style-type:none}
  #primaryMenu li{padding:0;margin:0;position:relative}
  #primaryMenu a{font-size:0.95em}
  
  #primaryMenu&gt;ul{border-bottom:1px solid #aaa;position:relative}
  #primaryMenu&gt;ul&gt;li{border-bottom:1px solid #fff;border-top:1px solid #aaa}
  #primaryMenu&gt;ul&gt;li&gt;a{color:#333;text-shadow:-1px 1px 0 #fff;display:block;height:32px}
  #primaryMenu&gt;ul&gt;li.active&gt;a{display:block}
  #primaryMenu&gt;ul&gt;li&gt;a&gt;span{display:block;padding:5px 10px 5px 30px;line-height:normal;background:url(../img/cog.png) no-repeat 10px 9px;color:#666;text-shadow:-1px 1px 0 #fff}
  #primaryMenu&gt;ul&gt;li.hovered&gt;a&gt;span{color:#fff;text-shadow:-1px 1px 0 #666}
  #primaryMenu&gt;ul&gt;li.active&gt;a&gt;span{color:#fff;text-shadow:-1px 1px 0 #666}
  
  #primaryMenu&gt;ul&gt;li&gt;.arrow{top:-1000em}
  #primaryMenu&gt;ul&gt;li.active&gt;.arrow,
  #primaryMenu&gt;ul&gt;li.hovered&gt;a+.arrow{position:absolute;right:1px;top:0px;z-index:5}
  #primaryMenu&gt;ul&gt;li.active&gt;.arrow&gt;div,
  #primaryMenu&gt;ul&gt;li.hovered&gt;a+.arrow&gt;div{position: absolute;top: 0px;left: 0px;width: 14px;height: 32px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomright: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px}
  
  #primaryMenu&gt;ul&gt;li&gt;ul{display:none}
  #primaryMenu&gt;ul&gt;li&gt;ul&gt;li&gt;a,
  #primaryMenu&gt;ul&gt;li&gt;ul&gt;li&gt;ul&gt;li&gt;a{display:block;font-size:0.9em;padding:1px 10px;color:#444}
  #primaryMenu&gt;ul&gt;li&gt;ul&gt;li&gt;a:hover{color: #06e;}
  #primaryMenu&gt;ul&gt;li.active&gt;ul{display:block}
  
  #primaryMenu&gt;ul&gt;li.hovered{}
  #primaryMenu&gt;ul&gt;li.hovered&gt;ul{display:block; position:absolute;width:140px;background:#fff;top:-1px;right:-141px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-top:1px solid #aaa;z-index:1}
  #primaryMenu&gt;ul&gt;li.hovered&gt;ul&gt;li&gt;a{padding-left:20px}
  #primaryMenu&gt;ul&gt;li.hovered&gt;ul&gt;li&gt;a:hover,
  #primaryMenu&gt;ul&gt;li&gt;ul&gt;li&gt;ul&gt;li&gt;a:hover{background:#f0f6fd}
  
  #primaryMenu&gt;ul&gt;li&gt;ul&gt;li&gt;ul&gt;li&gt;a{padding-left:40px;font-size:0.8em;font-style:italic}
  </code></pre>
  
  <p>And the bit of JS that adds a hovered class</p>
  
  <pre><code>$('#primaryMenu&gt;ul&gt;li').hover(function(){
      if($(this).hasClass('active')){}else
      {
          $(this).addClass('hovered')
      }
  },
  function(){
      $(this).removeClass('hovered')
  });
  </code></pre>