title: Unclickable context menu inside content editable
body: <p>I have a little issue with my context menu inside a content editable. I think it's a style issue but i can't figure out what it's causing it. Here is the thing, my context menu is showing where he is suposed to, with the value he is suposed to have. But it seems like it is only a block for him and not a list of P element Inside my DIV element.</p>
  
  <p><a href="https://i.stack.imgur.com/XoJf2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XoJf2.png" alt="enter image description here"></a></p>
  
  <p>As you can see we can't click on the element Inside the context Menu.</p>
  
  <p>My CSS : </p>
  
  <pre><code>.ctxmenu
  {
      display: block;
      position: absolute;
      height: auto;
      padding: 0px;
      margin: 0;
      margin-left: 0.5em;
      margin-top: 0.5em;
      border: 1px solid black;
      background: #F8F8F8;
      z-index: 11;
      overflow: visible;
  }
  .ctxline
  {
      display: block;
      margin: 0px;
      padding: 0px 0px 0px 3px;
      border: 1px solid #F8F8F8;
      overflow: visible;
  }
  .ctxline:hover
  {
      border: 1px solid #BBB;
      background-color: #F0F0F0;
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>The content editable CSS :</p>
  
  <pre><code>.rootClass 
  {
      border:1 solid buttonface; 
      border:2 groove buttonhighlight;
      OVERFLOW: scroll; 
      OVERFLOW-X: hidden; 
      OVERFLOW-Y: auto; 
      WIDTH: 762px; 
      POSITION: relative; 
      TOP: 65px; 
      left: 10px; 
      HEIGHT: 88%; 
      WORD-WRAP: break-word;
      FONT-FAMILY :Times New Roman;
      background-color: white;
  }
  
  .menu_editeur 
  {   
      border : 0;
      background-color : #cccccc;
  }
  </code></pre>
  
  <p>the HTML : </p>
  
  <pre><code>&lt;DIV id=edth_corps contentEditable=true style="WORD-WRAP: break-word; FONT-SIZE: 12pt; BORDER-TOP: buttonhighlight 2px groove; HEIGHT: 400px; FONT-FAMILY: Helvetica; BORDER-RIGHT: buttonhighlight 2px groove; WIDTH: 690px; OVERFLOW-X: hidden; BORDER-BOTTOM: buttonhighlight 2px groove; POSITION: absolute; LEFT: 10px; BORDER-LEFT: buttonhighlight 2px groove; Z-INDEX: 4; TOP: 132px; BACKGROUND-COLOR: white" name="lettre" unselectable="" comportement="F"&gt;
      &lt;P&gt;&lt;SPAN id=0 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false"&gt;tset&lt;/SPAN&gt; pour &lt;SPAN id=1 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false"&gt;vior&lt;/SPAN&gt;
          &lt;DIV id=ctxmenu1 class=ctxmenu contentEditable=false style="CURSOR: pointer; LEFT: 59px; TOP: 15px"&gt;
              &lt;P onclick=alertMe(); class=ctxline&gt;viorne&lt;/P&gt;
              &lt;P onclick=alertMe(); class=ctxline&gt;viornes&lt;/P&gt;
          &lt;/DIV&gt;
      &lt;/P&gt;
  &lt;/DIV&gt;
  </code></pre>
  
  <p>Or if you know any properties that might end up doing this, my cowerker may have hide some CSS on other place (they did not use a CSS file to put all style inside ...).</p>
  
  <p>Example of what he should do :</p>
  
  <p><a href="https://i.stack.imgur.com/HPvdS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HPvdS.png" alt="enter image description here"></a></p>