I am working with electron to produce an app but my menu bar doesn't seem to work. I have applied some CSS on it to produce the desired output. I checked the thing on other HTML outside Electron and it seemed to work.

If anybody can look into my code and say what's wrong.. The thins is that I have the navigation bar set up. When the user hovers upon the innermost anchor tags, the font-weight should be bold. However, that doesn't seem to work.

And also, the other thing is that the anchors are linked to some modals but those don't seem to work as well. The whole nav-bar works perfectly outside of electron though.

I know it might be a little hectic to look at so much of code... But if someone could help me out. I am going to paste the HTML with over here and I will be linking the CSS

So the two files of concern are `mainWindow.html` and `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>

```

I have linked jquery and other required stuff as well. 

Here is the link to the CSS file: <https://pastebin.com/d5aLqApy>

And yeah, I am aware that the CSS contains a lot of `!important` in it...
The `z-index` is there because I have a textarea below the nav bar.....

And here is how the thing should function: <https://jsfiddle.net/Sid2018/uthqv36o/1/>