如何在primefaces中为<p：megamenu>添加透明效果？</p：megamenu>

Question

下面是我的jsf页面（正文中的代码）和css文件：
JSF页面：

<h:body id="board">
    <h:form prependId="false">
        <p:megaMenu id="headerMenu">
            <p:submenu label="Video Lessons" styleClass="subMenu">
                <p:column styleClass="headerColumn">
                    <p:submenu label="Instruments">
                        <p:menuitem value="Learn to play the Piano" styleClass="item"/>
                        <p:menuitem value="Learn to play the Cello" styleClass="item"/>
                    </p:submenu>
                </p:column>

                <p:column styleClass="headerColumn">
                    <p:submenu label="Theory">
                        <p:menuitem value="Western music history" styleClass="item"/>
                    </p:submenu>
                </p:column>
            </p:submenu>

            <p:submenu label="Teachers" styleClass="subMenu">
                <p:column styleClass="headerColumn">
                    <p:submenu label="Piano">
                        <p:menuitem value="Tamara"/>
                    </p:submenu>
                </p:column>

                <p:column styleClass="headerColumn">
                    <p:submenu label="Guitar">
                        <p:menuitem value="Farzad Daneshmand"/>
                    </p:submenu>
                </p:column>
            </p:submenu>

            <p:submenu label="Instruments" styleClass="subMenu">
                <p:column styleClass="headerColumn">
                    <p:submenu label="Strings">
                        <p:menuitem value="Cello"/>
                    </p:submenu>
                </p:column>

                <p:column styleClass="headerColumn">
                    <p:submenu label="Keyboards">
                        <p:menuitem value="Organ"/>
                    </p:submenu>
                </p:column>
            </p:submenu>

            <p:menuitem value="About us" styleClass="item"/>
        </p:megaMenu>
    </h:form>
</h:body>

css文件（homeStyle.css）：

#headerMenu {
    background-color: rgba(88,56,32,0);
}
#board {
    background-image: url("images/sheetmusic.jpg");
    background-size: cover;
}

在css部分我尝试使megaMenu透明，它工作正常，但有两个问题：

1.当鼠标悬停在菜单子菜单上时，即视频课程，教师，...，蓝色突出显示仍然存在。

2.当打开一个新的子菜单时，css不会应用于subMenus，所以当我尝试将下面的代码添加到css时，它不像我在megaMenu中预期的那样工作：

.headerColumn {
    background-color: rgba(88,56,32,0);
}

但是在rgba（）中将'0'更改为'1'会产生一个棕色，这不是我想要的;此外，它仅适用于列的内部。

还有一件事，InternetExplorer中的输出不能像它应该的那样工作。
这是我在谷歌Chrome中得到的（在chrome中工作正常）： 有什么建议吗？ thansks！

Answer 1

您可以为菜单子项的css添加不透明度，如下所示：

.ui-menu.ui-megamenu .ui-menu-parent .ui-menu-child {
  width: auto;
  opacity: 0.8;
}