电子:模式和自定义菜单栏的问题

Question

我正在与电子生产应用程序，但我的菜单栏似乎不工作。我在上面应用了一些CSS来产生所需的输出。我检查了其他HTML之外的电子，它似乎工作。

如果有人能查到我的代码说出了什么问题..。最重要的是我已经设置了导航条。当用户悬停在最里面的锚标签上时，字体的重量应该是粗体的.然而，这似乎不起作用。

此外，另外一件事是，锚是连接到一些模式，但似乎不起作用。不过，整个导航条在电子之外工作得很好。

我知道看这么多代码可能有点紧张.但如果有人能帮我的话。我将在这里粘贴HTML，我将链接CSS

因此，需要关注的两个文件是mainWindow.html和dock.css

mainWindow.html

<nav class="navy-main">

        <div class="logo">T-Mordern</div>

        <ul>

            <li>
                <a href="#" class="navy-item">File</a>
                <div class="navy-content">
                    <div class="navy-sub">
                        <ul>
                            <li>
                                <a href="#">New File</a>
                            </li>
                            <li>
                                <a href="#">New Project</a>
                            </li>
                            <li>
                                <a href="#">Open File</a>
                            </li>
                            <li>
                                <a href="#">Save</a>
                            </li>
                            <li>
                                <a href="#">Save As</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li>
                <a href="#" class="navy-item">Edit</a>
                <div class="navy-content">
                    <div class="navy-sub">
                        <ul>
                            <li>
                                <a href="#">Cut</a>
                            </li>
                            <li>
                                <a href="#">Copy</a>
                            </li>
                            <li>
                                <a href="#">Pate</a>
                            </li>
                            <li>
                                <a href="#">Undo</a>
                            </li>
                            <li>
                                <a href="#">Redo</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li>
                <a href="#" class="navy-item">Settings</a>
                <div class="navy-content">
                    <div class="navy-sub">
                        <ul>
                            <li>
                                <a data-toggle="modal" href="#ThemeSet">Theme Settings</a>
                            </li>
                            <li>
                                <a data-toggle="modal" href="#FontSet">Font Settings</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

        </ul>
        <span class="close-my">&times;</span>
        <span class="close-my">&boxH;</span>
        <span class="close-my">&minus;</span>
    </nav>

    <!--Modals-->
    <div class="modal" id="ThemeSet">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Theme</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group modal-body">
                        <p>
                            <label for="theme" id="text-theme">Please Select Your Theme form here:</label>
                            <select class="form-control" id="theme">
                                <option value="pastel-on-dark" selected>Pastel On Dark</option>
                                <option value="default">Standard</option>
                                <option value="darcula">Darcula</option>
                                <option value="cobalt">Cobalt</option>
                                <option value="solarized">Solarized</option>
                                <option value="shadowfox">ShadowFox</option>
                                <option value="seti">Seti</option>
                                <option value="rubyblue">RubyBlue</option>
                                <option value="railcasts">RailsCasts</option>
                                <option value="paraiso-light">Paraiso-Light</option>
                                <option value="paraiso-dark">Paraiso-Dark</option>
                                <option value="panda-syntax">Panda Syntax</option>
                                <option value="oceanic-next">Oceanic Next</option>
                                <option value="night">Night</option>
                                <option value="neo">Neo</option>
                                <option value="neat">Neat</option>
                                <option value="monokai">Monokai</option>
                                <option value="midnight">Midnight</option>
                                <option value="mdn-like">MDN Like</option>
                                <option value="mbo">MBO</option>
                                <option value="material">Material</option>
                                <option value="lucario">Lucario</option>
                                <option value="liquibyte">Liquibyte</option>
                                <option value="lesser-dark">Lesser Dark</option>
                                <option value="isotope">Isotope</option>
                                <option value="idea">IDEA</option>
                                <option value="icecoder">IceCoder</option>
                                <option value="hopscotch">Hopscotch</option>
                                <option value="gruvbox-dark">Gruvbox Dark</option>
                                <option value="erlang-dark">Erlang Dark</option>
                                <option value="elegant">Elegant</option>
                                <option value="eclipse">Eclipse</option>
                                <option value="duotone-light">Duotone Light</option>
                                <option value="duotone-dark">Duotone Dark</option>
                                <option value="colorforth">ColorForth</option>
                                <option value="blackboard">BlackBoard</option>
                                <option value="bespin">Bespin</option>
                                <option value="base16-light">Base16 Light</option>
                                <option value="base16-dark">Base16 Dark</option>
                                <option value="ambiance">Ambiance</option>
                                <option value="ambiance-mobile">Ambiance Mobile</option>
                                <option value="abcdef">ABCDEF</option>
                                <option value="3024-night">3024 Night</option>
                                <option value="3024-day">3024 Day</option>
                                <option value="zenburn">Zenburn</option>
                                <option value="yeti">Yeti</option>
                                <option value="xq-light">XQ Light</option>
                                <option value="xq-dark">XQ Dark</option>
                                <option value="vibrant-ink">Vibrant Ink</option>
                                <option value="twilight">Twilight</option>
                                <option value="ttcn">TTCN</option>
                                <option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
                                <option value="tomorrow-night-bright">Tomorrow Night Bright</option>
                                <option value="the-matrix">The Matrix</option>
                                <option value="ssms">SSMS</option>
                            </select>
                    </div>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save">Save Changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="FontSet">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Font Settings: </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group modal-body">
                        <p>
                            <p class="lead" id="intext">Change Font-Size: <select class="form-control" id="fontval">
                                    <option value="14">14</option>
                                    <option value="16">16</option>
                                    <option value="18">18</option>
                                    <option value="20">20</option>
                                    <option value="22">22</option>
                                    <option value="24">24</option>
                                    <option value="26">26</option>
                                    <option selected value="28">28</option>
                                    <option value="32">32</option>
                                    <option value="48">48</option>
                                    <option value="72">72</option>
                                    <option value="96">96</option>
                                    <option value="108">108</option>
                                </select>
                            </p>
                            <hr class="my-4">
                            <p class="lead" id="intext2">Change Font Face: <select class="form-control" id="fontval2">
                                    <option value="Arial">Arial</option>
                                    <option value="Calibri">Calibri</option>
                                    <option value="Consolas" selected>Consolas</option>
                                    <option value="Courier">Courier</option>
                                    <option value="Lucida Console">Lucida Console</option>
                                    <option value="Segoe UI">Segoe UI</option>
                                    <option value="Times New Roman">Times New Roman</option>
                                </select>
                            </p>
                    </div>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="fsave">Save Changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

我还链接了jquery和其他必需的东西。

下面是CSS文件的链接：https://pastebin.com/d5aLqApy

是的，我知道CSS里面有很多!important .z-index在那里，因为我在导航栏下面有一个文本框.

下面是这个东西应该如何工作：https://jsfiddle.net/Sid2018/uthqv36o/1/

Answer 1

在我看来，我下载的文件在某种程度上不能正常工作。它们在浏览器中工作，但在电子领域不起作用。但当我重新下载它们的时候.

Answer 2

您看过在主线程中以本地方式实现这个功能吗？您的用户可能也会发现这更直观。

电子菜单文档