/* menu */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

.mainMenuItem a,
.mainMenuItem button,
.frameMenuItem a,
.frameMenuItem button {
    padding: 3.5dvh 3px 3.5dvh 3px;
}

.mainMenuItem {
    float: left;
    width: 25%;
}

.subMenuItem {
    float: none;
    color: white;
    text-align: center;
    text-decoration: none;
}

li a,
li button {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
    width: 100%;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: white;
}

li button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: white;
    box-sizing: border-box;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    margin: 0;
}
    /* Firefox button fix */
    li button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

.mainMenuItem a:hover,
.mainMenuItem button:hover {
    background-color: red;
}

ul.subMenu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 40%;
    z-index: 1;
    /* Scrollable submenu */
    max-height: 75dvh;
    overflow-y: auto;
}
/*to show submenu items properly in page*/
#helpMenuItems {
    right: 0;
}

ul.subMenu a,
ul.subMenu button {
    color: black;
    padding: 3.5dvh 3px 3.5dvh 3px;
    text-decoration: none;
    display: block;
    text-align: left;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: black;
    background: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    margin: 0;
}
    /* Firefox button fix */
    ul.subMenu button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    ul.subMenu a:hover,
    ul.subMenu button:hover {
        background-color: #D0D3D4;
    }
/* for non-touch devices */
@media (hover: hover) {
    ul.subMenu {
        width: 25%;
    }

        ul.subMenu a,
        ul.subMenu button {
            padding: 2dvh 3px 2dvh 3px;
        }
}