html - 内容可编辑的不可点击的上下文菜单

Question

我在可编辑内容中的上下文菜单有点问题。我认为这是一个风格问题，但我不知道是什么原因造成的。事情就是这样，我的上下文菜单显示了他应该去的地方，以及他应该拥有的值(value)。但它似乎只是他的一个 block ，而不是我的 DIV 元素内的 P 元素列表。

如您所见，我们无法单击上下文菜单中的元素。

我的CSS:

.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;
}

内容可编辑的CSS:

.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;
}

HTML :

<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">
    <P><SPAN id=0 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false">tset</SPAN> pour <SPAN id=1 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false">vior</SPAN>
        <DIV id=ctxmenu1 class=ctxmenu contentEditable=false style="CURSOR: pointer; LEFT: 59px; TOP: 15px">
            <P onclick=alertMe(); class=ctxline>viorne</P>
            <P onclick=alertMe(); class=ctxline>viornes</P>
        </DIV>
    </P>
</DIV>

或者，如果您知道任何可能最终导致这种情况的属性，我的同事可能在其他地方隐藏了一些 CSS(他们没有使用 CSS 文件将所有样式放入...)。

他应该做什么的例子:

Answer 1

使用上下文菜单标签。

<menu type="context" id="mymenu">
    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/refresh-icon.png"></menuitem>
    <menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/comment_icon.gif"></menuitem>
    <menu label="Share on..." icon="/images/share_icon.gif">
        <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick=""></menuitem>
        <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick=""></menuitem>
    </menu>
</menu>

这是引用视频，我在 Youtube 上找到的

干杯;)