html - 如何为 in primefaces? 添加透明效果

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.当悬停在菜单子(monad)菜单上时，即 Video lessons, Teachers,... ，蓝色突出显示仍然存在。

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

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

但是将 rgba() 中的“0”更改为“1”会变成纯棕色，这不是我想要的；此外，它仅适用于列的内部。

还有一件事，InternetExplorer 中的输出并不像预期的那样工作。
这是我在 google chrome 中得到的(在 chrome 中工作正常): 有什么建议吗？
谢谢!

Answer 1

您可以向子菜单的 css 添加不透明度，如下所示:

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