a drop-down menu
Published: 2024-04-12 19:07:48

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="authords" content="Miguel">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etech Competition</title>

    <link rel="stylesheet" href="/css/styles.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <header>
        <img src="image/Black White Retro Y2K Streetwear Clothing Logo.png" alt="Logo du site" class="image logo">
    </header>

    <nav>
        <div class="wrapper">
            <section> 
                <ul class="nav-links">
                    <li>
                        <!--<a href="#home">HOME</a>-->

                        <input type="checkbox" id="showMega">
                        <label for="showMega" class="mobile-item">HOME</label>
                    
                        <div class="mega-box">
                            <div class="content">

                                <div class="row">
                                    <img src="image/images (1).jpeg">
                                </div>

                                <div class="row">
                                    <header>Vêtements</header>
                                    <hr>
                                    <h3>MANTEAUX AND CO</h3>
                                    <hr>
                                    <ul class="mega-links">
                                        <li>
                                            <a href="#">Doudounes</a>
                                        </li>
                                        <li>
                                            <a href="#">Manteaux</a>
                                        </li>
                                        <li>
                                            <a href="#">Parkas</a>
                                        </li>
                                        <li>
                                            <a href="#">Vestes</a>
                                        </li>
                                    </ul>
                                    <hr>
                                </div>

                                <div class="row">
                                    <header>HAUTS</header>
                                    <ul class="mega-links">
                                        <hr>
                                        <li><a href="#">Chemises</a></li>
                                        <li><a href="#">Debardeurs</a></li>
                                        <li><a href="#">Gilets</a></li>
                                        <li><a href="#">Photos</a></li>
                                        <li><a href="#">Pulls</a></li>
                                        <li><a href="#">Sweats</a></li>
                                        <li><a href="#">T-shirts</a></li>
                                    </ul>
                                    <hr>
                                </div>

                                <div class="row">
                                    <header>BAS</header>
                                    <ul class="mega-links">
                                        <li><a href="#">Jeans</a></li>
                                        <li><a href="#">Pantalons</a></li>
                                        <li><a href="#">Shors</a></li>
                                        <li><a href="#">Sportswear</a></li>
                                        <button>Beach</button>
                                        <button>Underwear</button>
                                        <button>Nonveutes</button>
                                    </ul>
                                </div>

                                <div class="row spec">
                                    <header>Marques</header>
                                    <ul>
                                        <li><a href="#">Canada Goose</a></li>
                                        <li><a href="#">Carthartt</a></li>
                                        <li><a href="#">Eleven Paris</a></li>
                                        <li><a href="#">Obey</a></li>
                                        <li><a href="#">Fenfield</a></li>
                                        <li><a href="#">Superdry</a></li>
                                        <li><a href="#">The North Face</a></li>
                                        <li><a href="#">Tous les marques</a></li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li><a href="#FEMME">FEMME</a></li>
                    <li><a href="#SNEAKERS">SNEAKERS</a></li>
                    <li><a href="#WHAT'S HOT">WHAT'S HOT</a></li>
                    <li><a href="#MARQUES">MARQUES</a></li>
                </ul>
            </section>
            <section>    
                <ul class="nav-links">
                    <li><a href="MAGASIS">MAGASINS |</a></li>
                    <li><a href="TENDANCE">TENDANCE |</a></li>
                    <li><a href="LOOKBOOK">LOOKBOOK</a></li>
                </ul>
            </section>
        </div>

    </nav>

    <main>
        <h1>Votre horizon vertements</h1>

        <div class="container">
            <section class="choice">
                <figure>
                    <img src="image/Infographie-QuestiondeStyle1-FamillesdeStyles-1024x768-compressed.png" >
                </figure>
            </section>
    
            <section class="focus">
    
                <div class="show">
                    <div class="Focus-on">
                        <figure>
                        <h2>FOCUS ON</h2>
                            <img src="image/bb00f93979e99783d4e4adbd34508afa.jpg" alt="-1789- CALA" class="image">
                        </figure>
                    </div>
                    <div class="What's-hot">
                        <figure>
                        <h2>WHAT'S HOT</h2>
                            <img src="image/Streetwear-homme-0.webp" alt="CHATON" class="image">
                        </figure>
                    </div>
                    <div class="Look-book">
                        <figure>
                        <h2>LOOKBOOK</h2>
                            <img src="image/images.jpeg" alt="boy" class="image">
                        </figure>
                    </div>
                </div>
    
            </section>
        </div>

    </main>

    <footer>
        <article>
            <p>Suivez nous sur Tiktok <a href="#tiktok">Tiktok</a> </p>
            <p>Pour tout vos commande de sites internet, contacte <a href="#">MEtech</a></p>
        </article>

        <article>
            <p>Réalisations : </p>
        </article>
    </footer>

</body>
</html>

Ajust it with the css : 


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

main .show {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
}

h1, h2 {
    font-family: sans-serif;
    letter-spacing: 5px;
    font-size: 25px;
    text-align: center;
}

.page-couverture img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
}

img {
    display: block;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
}

.image {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

/*--------------------------------------------------------------*/

.mega-box {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 30px;
    top: 85px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#showMega:checked ~ .mega-box {
    opacity: 1;
    visibility: visible;
}

/************************************/
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    z-index: 999;
}

.nav-links {
    display: flex;
    list-style-type: none;
    padding: 0;
}

.nav-links li {
    margin-right: 20px;
    position: relative;
}

.nav-links li:last-child {
    margin-right: 0;
}

.nav-links li a {
    text-decoration: none;
    color: inherit;
}

.wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 /*******************************/

/* Dropdown menu styles */

/*************************************/
/*.mega-box {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 30px;
    top: 100%; /* Position the dropdown box below the list item 
    opacity: 0;
    visibility: hidden;
    background-color: #000; /* Add a background color 
    transition: opacity 0.3s ease, visibility 0.3s ease;
}*/

.nav-links li:hover .mega-box {
    opacity: 1;
    visibility: visible;
}

.content .row {
    width: 30%; /* Adjust width as needed */
    margin-bottom: 15px;
    color: #fff; /* Set text color to white */
}

.content .row header {
    font-size: 19px;
    margin-bottom: 5px; /* Add some spacing below the header */
    color: #fff; /* Set text color to white */
}

.content .row .mega-links li a {
    color: #fff; /* Set text color to white */
    text-decoration: none;
    display: block;
    padding: 5px 0; /* Add some padding to the links */
}

.content .row .mega-links li a:hover {
    color: #ff0; /* Change color on hover */
}

/***************************/

.content {
    display: flex;
    justify-content: space-between;
}

.content .row ul {
    list-style-type: none;
    padding: 0;
}

.content .row ul li {
    margin-bottom: 5px; /* Add some spacing between list items */
}

.content .row ul li a {
    color: #fff; /* Set text color to white */
    text-decoration: none;
    display: block;
}

.mega-box {
    position: absolute;
    left: 10%; /* Adjust left to center the menu horizontally */
    width: 80%; /* Set the width to 80% of the screen width */
    max-height: 300px; /* Set a reasonable max-height for the menu */
    overflow-y: auto; /* Enable vertical scrolling if the content exceeds max-height */
    padding: 10px 30px; /* Add padding for better aesthetics */
    top: 100%; /* Position the dropdown box below the list item */
    opacity: 0;
    visibility: hidden;
    background-color: #000; /* Add a background color */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99; /* Ensure the dropdown menu appears above other elements */
}