Visual effects are accomplished with the help of CSS

Default appearance

<?xml-stylesheet href="css1.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <menubar>
          <menu value="AAA">
               <menupopup>
                    <menuitem value="aaa"/>
                    <menuitem value="bbb"/>
               </menupopup>
          </menu>
          <menu value="BBB">
               <menupopup>
                    <menuitem value="111"/>
                    <menuitem value="222"/>
               </menupopup>
          </menu>
     </menubar>
</window>

xul2.xul

Some changes were made in CSS

<?xml-stylesheet href="css2.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <menubar>
          <menu value="AAA">
               <menupopup>
                    <menuitem value="aaa"/>
                    <menuitem value="bbb"/>
               </menupopup>
          </menu>
          <menu value="BBB">
               <menupopup>
                    <menuitem value="111"/>
                    <menuitem value="222"/>
               </menupopup>
          </menu>
     </menubar>
</window>

css1.css

The default Mozilla CSS is used.

@import url(chrome://global/skin);

css2.css

A few changes have a deep imact.

@import url(chrome://global/skin);
menubar {background-color:navy; font-weight:900}
menu:hover {background-color:white; font-weight:bold; font-style:italic}
menu:active {background-color:aqua; font-weight:bold; font-style:italic}
menu {color:white;margin-left:5em}
menuitem{background-color:red; color:yellow; font-size:200%;}
menupopup {border: double purple; border-width:1em;}