Navbar Design




HTML  Code 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop down Menu</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
        <nav class="flex">
            <div class="logo">
                <h1>Siddharth</h1>
            </div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li>
                    <a href="#">Projects
                        <ion-icon name="caret-down-outline"></ion-icon>
                    </a>
                    <ul>
                        <li><a href="#">Hover Effect</a></li>
                        <li><a href="#">3d Flip card</a></li>
                        <li><a href="#">Loder</a></li>
                        <li><a href="#">Digital clock</a></li>
                        <li><a href="#">CSS-3 Slider</a></li>
                        <li><a href="#">Game</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Web Development
                        <ion-icon name="caret-down-outline"></ion-icon>
                    </a>
                    <ul>
                        <li>
                            <a href="#">Front End
                                <ion-icon name="caret-forward-outline"></ion-icon>
                            </a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">JavaScript</a></li>
                                <li><a href="#">Bootsrap</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Back End
                                <ion-icon name="caret-forward-outline"></ion-icon>
                            </a>
                            <ul>
                                <li><a href="#">Node.js</a></li>
                                <li><a href="#">Mongo.db</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>


CSS Code 


@import url('https://fonts.googleapis.com/css2?family=Anek+Odia:wght@300&family=Baloo+Bhai+2&family=Baloo+Chettan+2&family=Bebas+Neue&family=Bree+Serif&family=Convergence&family=Dancing+Script&family=Dosis:wght@400;500;600;700&family=Lato:wght@100&family=Montserrat:wght@400;500;600;700&family=Playfair+Display&family=Ramaraja&family=Roboto+Condensed&family=Roboto:wght@100;300;400;500;700&family=Sofia+Sans+Condensed&family=Ubuntu:wght@400;500;700&display=swap');

* {

    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    font-family: 'Sofia Sans Condensed', sans-serif;
    overflow-x: hidden
    ;
}

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

.container {
    width: 100%;
    height: 100vh;
    background-image: url(../img/mountains-g50890940b_1920.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

nav .logo  {
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
    line-height: 5rem;
    padding-left: 2.5rem;
    cursor: pointer;
}

nav {
    height: 5rem;
    background-color: #063247;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.4);
    opacity: 0.6;
}

nav ul {
    margin-right: 3.5rem;
    /* position: relative; */
}

nav ul li {
    display: inline-block;
}

nav ul li:hover > ul {
    top: 5rem;
    opacity: 1;
    visibility: visible;
    transition: .3s linear;
}

nav ul li a {
    color: #fff;
    display: block;
    padding: 0 1rem;
    line-height: 5rem;
    font-size: 1rem;
    background: #063247;
    transition: .2s;
}

nav ul li a:hover {
    color: #23dbdb;
}



nav ul ul {
    position: absolute;
    top: 5.5rem;
    border-top: 3px solid #23dbdb;
    opacity: 0;
    visibility: hidden;
}

nav ul ul li {
    width: 10rem;
    display: list-item;
    position: relative;
    border: 1px solid #042331;
    border-top: none;
    
}

nav ul ul li a {
    line-height: 3rem;

}

nav ul ul li:hover > a {
    color: #23dbdb;
    
}

nav ul ul ul {
    border-top: none;

}

nav ul ul ul li {
    position: relative;
    top: -5rem;
    left: 10rem;
}

/*  My Practic Code Using References */