Thiết kế website giá rẻ

Question

I have designed my sites mobile nav, but im having some problems trying to get this to be on top of the other elements on the page layer problem image here.
There are three text areas on the page that I cant seem to get to sit behind the menu, which is then causing some menu items not to show the sub menu when hovered over . I think this is z-index related.

Ive tried adding Z-index, flex and position tags to the css, but its not working for me, the mobile nav always sits below the 3 text sections on the page.
I will be honest, im a bit confused now and not sure how to resolve it.
Any help with this would be greatly appreciated

Ive copied the HTML and CSS below so you can replicate what im seeing in browser if it helps, so apologies if ive copied too much.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>World-War-2.org | World War 2 Timelines | 1939-1945</title>
    <meta name="description" content="World-War-2.org - A World at War - A compilation of complete World War 2 Timelines split into Campaigns which detail every event, day by day from 1939 through to 1945.">
    <meta name="keywords" content="world war 2, world war two, world war II, world war 2 timeline, world war two timeline, world war II timeline, world war 2 campaign, world war two campaign, world war II campaign, world war, world, war, timeline, campaign, 2, two, II, 1939, 1940, 1941, 1942, 1943, 1944, 1945">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="test-style.css">
    <link rel="stylesheet" href="test-style-desktop-navbar.css">
    <link rel="stylesheet" href="test-style-mobile-navbar.css">
    <link rel="stylesheet" href="test-style-media-desktop.css">
    <link rel="stylesheet" href="test-style-media-tablet.css">
    <link rel="stylesheet" href="test-style-media-mobile.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Alumni+Sans:ital,wght@0,100..900;1,100..900&family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Header Section Start -->
    <section class="header">
        <div class="container" data-type="headercontainer">

            <!-- DESKTOP NAVIGATION START -->

            <nav class="nav-desktop">
                <div class="nav-desktop-menu-links" id="desktopnavmenulinks">
                    <ul class="ul-desktop-upper-menu">
                        <li class="li-desktop-main-menu-item"><a class="a-desktop-main-menu-item" href="index.html">A World at War</a></li>
                        <li class="li-desktop-main-menu-item"><a class="a-desktop-main-menu-item" href="#">The Road to War</a></li>
                        <li class="li-desktop-main-menu-item"><a class="a-desktop-main-menu-item" href="#">Desktop Site</a></li>
                    </ul>
                    <ul class="ul-desktop-lower-menu">
                        <li class="li-desktop-main-menu-item-with-submenu">
                            <a class="a-desktop-main-menu-item-with-submenu" href="#">Eastern Europe</a>
                            <div class="desktop-sub-menu-1">
                                <ul class="ul-desktop-sub-menu-1">
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Invasion of Poland</a> </span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Winter War</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Barbarossa</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Typhoon</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-desktop-main-menu-item-with-submenu">
                            <a class="a-desktop-main-menu-item-with-submenu" href="#">Western Europe</a>
                            <div class="desktop-sub-menu-1">
                                <ul class="ul-desktop-sub-menu-1">
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Phoney War</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Operation Weserbung</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Low Countries</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Battle of France</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-desktop-main-menu-item-with-submenu">
                            <a class="a-desktop-main-menu-item-with-submenu" href="#">Italy and the Balkans</a>
                            <div class="desktop-sub-menu-1">
                                <ul class="ul-desktop-sub-menu-1">
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Greeks Attacked</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Invasion of Yugoslavia</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Greece and Crete</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-desktop-main-menu-item-with-submenu">
                            <a class="a-desktop-main-menu-item-with-submenu" href="#">North Africa</a>
                            <div class="desktop-sub-menu-1">
                                <ul class="ul-desktop-sub-menu-1">
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Italy Advances</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">British Reposte</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Enter Rommel</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-desktop-main-menu-item-with-submenu">
                            <a class="a-desktop-main-menu-item-with-submenu" href="#">Battle of the Atlantic</a>
                            <div class="desktop-sub-menu-1">
                                <ul class="ul-desktop-sub-menu-1">
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">First Happy Time</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Hunt for the Bismarck</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Second Happy Time</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-desktop-main-menu-item-with-submenu">
                            <a class="a-desktop-main-menu-item-with-submenu" href="#">War for the Pacific</a>
                            <div class="desktop-sub-menu-1">
                                <ul class="ul-desktop-sub-menu-1">
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Pearl Harbour</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Japan Runs Wild</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Singapore</a></span>
                                    </li>
                                    <li>
                                        <span class="li-desktop-sub-menu-1-item"><a class="a-desktop-sub-menu-1-item" href="#">Phillipines</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <a href="index.html"><img class="logo" src="images/logo/world-war-2-logo.webp" alt="World-War-2.org Logo" title="World-War-2.org"> </a>
            </nav>


            <!-- Hamburger Button -->
            <button class="hamburger">
                <div class="bar"></div>
            </button>

            <!-- MOBILE NAVIGATION START -->

            <nav class="nav-mobile">
                <a href="index.html"><img class="logo" src="images/logo/world-war-2-logo.webp" alt="World-War-2.org Logo" title="World-War-2.org"> </a>
                <div class="nav-mobile-menu-links" id="mobilenavmenulinks">
                    <ul class="ul-mobile-upper-menu">
                        <li class="li-mobile-main-menu-item"><a class="a-mobile-main-menu-item" href="index.html">A World at War</a></li>
                        <li class="li-mobile-main-menu-item"><a class="a-mobile-main-menu-item" href="#">The Road to War</a></li>
                        <li class="li-mobile-main-menu-item"><a class="a-mobile-main-menu-item" href="#">Mobile Site</a></li>
                    </ul>
                    <ul class="ul-mobile-lower-menu">
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">Eastern Europe</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Invasion of Poland</a> </span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Winter War</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Barbarossa</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Typhoon</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">Western Europe</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Phoney War</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Operation Weserbung</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Low Countries</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Battle of France</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">Italy and the Balkans</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Greeks Attacked</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Invasion of Yugoslavia</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Greece and Crete</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">North Africa</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Italy Advances</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">British Reposte</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Enter Rommel</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">Battle of the Atlantic</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">First Happy Time</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Hunt for the Bismarck</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Second Happy Time</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">War for the Pacific</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Pearl Harbour</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Japan Runs Wild</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Singapore</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Phillipines</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>

            </nav>
        </div>
    </section>




    <!-- Cover Section Starts  -->
    <section class="cover-overlay">
        <div class="container" data-type="covertitlecontainer">
            <p class="cover-website-title">World-War-2.org</p>
            <p class="cover-page-title">1939-1945 - A World at War</p>
        </div>

        <div class="container" data-type="coverherobuttonscontainer">
            <a href="#" class="hero-button1">The Road to War</a>
            <a href="index.html" class="hero-button2">A World at War</a>
            <a href="#" class="hero-button3">Invasion of Poland</a>
        </div>

        <div class="container" data-type="coverquotecontainer">
            <p class="cover-quote">"This war no longer bears the characteristics of former inter-European conflicts. It is one of those elemental conflicts which ushers in a new millennium and which shake the world once in a thousand years."</p>
            <p class="cover-quote-leader">Adolf Hitler</p>
        </div>
        
    </section>
    <!-- Cover Section Ends  -->
    <!-- Header Section End  -->



    <!-------------Javascript for Toggle Show/Hide Menu for Mobile Devices---------->
    <script src="javascript/hamburger.js"></script>
</body>
</html>

CSS for Mobile-Nav


.nav-mobile {
    display: flex;
    padding: 1% 1% 1% 1%;
    border: 1px solid rgb(0, 191, 255);
    /*z-index: 99999;*/
}
/*.nav-mobile .logo{
    align-items:center;
}*/

.nav-mobile-menu-links {
    flex: 1;
    border: 3px solid orange;
        
}

.nav-mobile .ul-mobile-upper-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0px 0px 0px -3px;
    border: 3px solid pink;
    flex-direction: column;
}

.nav-mobile .ul-mobile-lower-menu {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap; /*WRAPS MENU LINKS*/
    margin: 0px 0px 0px -3px;
    border: 3px solid pink;
    flex-direction: column;
}

.nav-mobile ul li {
    display: inline-block;
    padding: 5px 6px 5px 6px;
    margin: 0px 2px 0px 2px;
    position: relative;
    list-style: none;
}

.li-mobile-main-menu-item, .li-mobile-main-menu-item-with-submenu {
    width: fit-content;
}

.nav-mobile a {
    display: flex;
    color: #fff;
    font-family: "Amatic SC", sans-serif;
    list-style: none;
}

.nav-mobile .a-mobile-main-menu-item {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    list-style: none;
}

.a-mobile-main-menu-item-with-submenu {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    list-style: none;
}

/* Main Menu Item Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 191, 255);
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-mobile ul .li-mobile-main-menu-item:hover::after {
    width: 100%;
}

.nav-mobile ul .a-mobile-main-menu-item:hover {
    color: rgba(0, 191, 255);
}


/* Main Menu Item Hover Effects End */

/* Main Menu Item With Submenu Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item-with-submenu::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 191, 255);
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-mobile ul .li-mobile-main-menu-item-with-submenu:hover::after {
    width: 100%;
}

/* Main Menu Item With Submenu Hover Effects End */


/* Hide Sub-Menu-1 being displayed until Hovered on */
.mobile-sub-menu-1 {
    display: none;
}


/* SUB MENU 1 CONFIG */


/*.sub-menu-1 {
}*/

.ul-mobile-sub-menu-1 {
    list-style: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: rgb(0, 191, 255, 0.5);
    left: 0;
    top: 37px;
    border-radius: 5px 5px;
    padding: 4px 0px 4px 0px;
    width: max-content;
}

.li-mobile-sub-menu-1-item {
    position: relative;
    list-style: none;
    display: inline-block; 
}

.a-mobile-sub-menu-1-item {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    list-style: none;
}

/* Sub Menu 1 Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item-with-submenu:hover .mobile-sub-menu-1 {
    content: '';
    width: 0%;
    display: flex;
}

/* Creates a Dynamic underline after each Sub-Menu-1-item */
.li-mobile-sub-menu-1-item::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #ffffff;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.li-mobile-sub-menu-1-item:hover::after {
    width: 100%;
}
/*nav ul .li-main-menu-item-with-submenu:hover .sub-menu-1 {
    transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}*/

/* Changes the Parent Menu Name Color when Sub-menu-1-item is hovered on */
.li-mobile-sub-menu-1-item.active.parent > a, .li-mobile-main-menu-item-with-submenu:hover > a {
    color: rgb(0, 191, 255);
}
/* Sub Menu 1 Hover Effects End */

/* Hamburger Start */
.hamburger {
    position: relative;
    display: block;
    width: 35px;
    cursor: pointer;
    appearance: none;
    background: none;
    outline: none;
    border: none;
    top: 15px;
    left: 15px;
    }

    .hamburger .bar, .hamburger::after, .hamburger::before {
        content: '';
        display: block;
        width: 100%;
        height: 5px;
        background-color: #fff;
        margin: 6px 0px;
        transition: 0.5s;
        border-radius: 5px 5px 5px 5px;
    }

    .hamburger.is-active::before {
        transform: rotate(-45deg) translate(-8px, 6px);
    }

    .hamburger.is-active::after {
        transform: rotate(45deg) translate(-9px, -8px);
    }

    .hamburger.is-active .bar {
        opacity: 0;
    }

.nav-mobile {
    position: absolute;
    right: -100%;
    /*left: 100%;*/
    top: 0;
    width: 35%;
    min-height: 100%;
    height: fit-content;
    display: block;
    z-index: 98;
    background-color: rgba(0,0,0,0.35);
    backdrop-filter:blur(5px) contrast(0.8);
    transition: 1s;
    /*margin-top:20%;*/
}

    .nav-mobile.is-active {
        /*left:70%;*/
        right: 0;
    }

CSS for desktop Nav Bar


/* Header Desktop Nav Section */

.container[data-type="headercontainer"] {
    height: 100vh;
    max-width: 1140px;
    background-image: linear-gradient(rgba(0,0,0,0.25),#999393),url(images/hero-photo/a-world-at-war-cover-d-1040-l85.webp);
    background-size: cover;
    background-position: center;
    margin: auto;
    /*overflow-x: hidden;*/
    position: relative;
    container-type: inline-size;
}

.nav-desktop {
    display: flex;
    padding: 1% 1%;
    justify-content: space-around;
    align-items:center;
}
/* Logo */
nav .logo {
    width: 175px;
}


.nav-desktop-menu-links {
    flex: 1;
    /*text-align: right;*/
}

nav .ul-desktop-upper-menu {
    /*max-width:contain;*/
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap; /*WRAPS MENU LINKS*/
    margin: 0px 0px 0px -3px;
}

nav .ul-desktop-lower-menu {
    /*max-width:contain;*/
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap; /*WRAPS MENU LINKS*/
    margin: 0px 0px 0px -3px;
}


nav ul li {
    display: inline-block;
    padding: 5px 6px 5px 6px;
    margin: 0px 2px 0px 2px;
    position: relative;
    list-style: none;
}

.li-desktop-main-menu-item, .li-desktop-main-menu-item-with-submenu {
    /*background-color: rgba(255,255,255,0.25);
    border-radius: 5px 5px;*/
}

nav a {
    /*height: 90%;*/
    display: flex;
    color: #fff;
    font-family: "Amatic SC", sans-serif;
    /*text-align:justify;*/
    /*padding: 0 30px;*/
    list-style: none;
}

nav .a-desktop-main-menu-item {
    /*height: 90%;*/
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    list-style: none;
}

.a-desktop-main-menu-item-with-submenu {
    /*height: 80%;*/
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    list-style: none;
}


/* Main Menu Item Hover Effects Start */
nav ul .li-desktop-main-menu-item::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 191, 255);
    display: block;
    margin: auto;
    transition: 0.5s;
}

nav ul .li-desktop-main-menu-item:hover::after {
    width: 100%;
}

nav ul .a-desktop-main-menu-item:hover {
    color: rgba(0, 191, 255);
}


/* Main Menu Item Hover Effects End */

/* Main Menu Item With Submenu Hover Effects Start */
nav ul .li-desktop-main-menu-item-with-submenu::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 191, 255);
    display: block;
    margin: auto;
    transition: 0.5s;
}

nav ul .li-desktop-main-menu-item-with-submenu:hover::after {
    width: 100%;
}



/* Main Menu Item With Submenu Hover Effects End */


/* Hide Sub-Menu-1 being displayed until Hovered on */
.desktop-sub-menu-1 {
    display: none;
}


/* SUB MENU 1 CONFIG */


.desktop-sub-menu-1 {
    /*transition: transform ease-in-out 3s;*/
}

.ul-desktop-sub-menu-1 {
    list-style: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: rgb(0, 191, 255, 0.5);
    left: 0;
    top: 37px;
    border-radius: 5px 5px;
    padding: 4px 0px 4px 0px;
    width: max-content;
    /*transition: transform ease-in-out 1s;*/
}

.li-desktop-sub-menu-1-item {
    position: relative;
    list-style: none;
    display: inline-block; /*SUGGESTED FIX*/
}

.a-desktop-sub-menu-1-item {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    list-style: none;
}

/* Sub Menu 1 Hover Effects Start */
nav ul .li-desktop-main-menu-item-with-submenu:hover .desktop-sub-menu-1 {
    content: '';
    width: 0%;
    /*height: 0px;*/
    /*  background: #ffffff;*/
    display: flex;
    transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}

/* Creates a Dynamic Line after each Sub-Menu-1-item */
.li-desktop-sub-menu-1-item::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #ffffff;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.li-desktop-sub-menu-1-item:hover::after {
    width: 100%;
}
/*nav ul .li-main-menu-item-with-submenu:hover .sub-menu-1 {
    transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}*/

/* Changes the Parent Menu Name Color when Sub-menu-1-item is hovered on */
.li-desktop-sub-menu-1-item.active.parent > a, .li-desktop-main-menu-item-with-submenu:hover > a {
    color: rgb(0, 191, 255);
}
/* Sub Menu 1 Hover Effects End */

CSS for Main Stylesheet




/*----------Cover Section-----------*/

.cover-overlay {
    display: flex;
    
}

.container[data-type="covertitlecontainer"] {
    width: 90%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.cover-website-title {
    font-size: 75px;
    font-family: "Amatic SC", sans-serif;
    font-weight: 700;
    color: #fff;
}

.cover-page-title {
    margin: 10px 0 40px;
    font-size: 40px;
    color: #fff;
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
}



.container[data-type="coverherobuttonscontainer"] {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.hero-button1, .hero-button2, .hero-button3{
    font-size: 20px;
    font-family: "Amatic SC", sans-serif;
    font-weight: 700;
}

.hero-button1 {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 0px;
    margin: 0 3px;
    /*font-size: 13px;*/
    background: transparent;
    position: relative;
    cursor: pointer;
}

    .hero-button1:hover {
        border: 1px solid #fff;
        background: rgb(0, 191, 255);
        transition: 0.5s;
    }

.hero-button2 {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 0px;
    margin: 0 3px;
    /*font-size: 13px;*/
    background: rgb(0, 191, 255);
    position: relative;
    cursor: pointer;
}

    .hero-button2:hover {
        border: 1px solid rgb(0, 191, 255);
        background: rgb(0, 191, 255);
        transition: 0.5s;
    }

.hero-button3 {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 0px;
    margin: 0 3px;
    /*font-size: 13px;*/
    background: transparent;
    position: relative;
    cursor: pointer;
}

    .hero-button3:hover {
        border: 1px solid #fff;
        background: rgb(0, 191, 255);
        transition: 0.5s;
    }


.container[data-type="coverquotecontainer"] {
    width: 1000px;
    color: #fff;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.cover-quote-leader {
    font-size: 25px;
    font-family: "Amatic SC", sans-serif;
    font-weight: 700;
    color: #fff
}

.cover-quote {
    margin: 10px 0 10px;
    font-size: 20px;
    color: #fff;
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
}

CSS for Desktop Specifics Customisations


/* Viewport greater than 1024px */
@media(min-width: 1024px) {

    /* Hides Mobile Navigation Menu */
    .nav-mobile {
        display: none;
    }
    .hamburger {
        display: none;
    }



    /*----------Cover Section-----------*/
    .cover-website-title {
        font-size: 75px;
    }

    .cover-page-title {
        font-size: 40px;
    }


  



    .hero-button1 {
        width: 150px;
    }

    .hero-button2 {
        width: 150px;
    }

    .hero-button3 {
        width: 150px;
    }

   
}

CSS for Mobile Specifics Customisations

/* Viewport of 767px Max */
@media(max-width: 767px) {

    /* Hides Desktop Navigation Menu */
    .nav-desktop {
        display: none;
    }

    /* Logo Size */
    .mobile-logo {
        width: 125px;
    }



    /*----------Cover Section-----------*/

    .cover-website-title {
        font-size: 40px;
    }

    .cover-page-title {
        font-size: 25px;
    }

    .container[data-type="coverquotecontainer"] {
        width: 90%;
    }

   

   
    .hero-button1 {
        width: 100px;
    }

    .hero-button2 {
        width: 100px;
    }

    .hero-button3 {
        width: 100px;
    }


}

Thiết kế website giá rẻ

Danh mục

Mobile nav layer wont appear above page content