a drop-down menu

<!DOCTYPE html>

Etech Competition

<link rel="stylesheet" href="/css/styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<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>

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 */
}

DEV Community

a drop-down menu

showMega:checked ~ .mega-box {

Top comments (0)

Read next

Ned's Declassified Git Survival Guide 📚

Beyond the Code: A Developer's Guide to a Healthy Lifestyle

🌐 Unleashing GraphQL in Next.js: Effortless Data Fetching! 🚀

How Outliers Affect the Mean: An Analogy with Leadership in a Company