Home How To's How To Create Dropdown Menu with Html and css

How To Create Dropdown Menu with Html and css

694
0

In this tutorial, you will learn how to create a dropdown menu hover with HTML and CSS. this video will walk through the HTML, CSS code, so that you create this project

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Dropdown menu with html and css</title>
</head>

<body>
    <header>
        <ul class="navbar">
            <li class="logo">
                <img src="img/logo.png" alt="top-logo">
               

            </li>
            <li> <a href="#" class="link">Home</a> </li>
            <li class="about"> <a href="#" class="link">About</a> 
             <ul class="dropmenu">
                 <li><a href="#" class="dropLink"> Resume</a> </li>
                 <li><a href="#" class="dropLink"> Download</a> </li>
             </ul>
            </li>
             <li><a href="#" class="link">Work</a> </li>
             <li><a href="#" class="link">Skills</a> </li>
             <li><a href="#" class="link">Contact</a> </li>

        </ul>
    </header>
    
</body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header{
    background: #feca57;
    height: 100vh;
}

header .navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    list-style: none;
}

header .navbar .logo img{
    width: 100px;
    height: 50px;
}

header .navbar li .link{
    flex: 0 0 auto;
    text-decoration: none;
    padding: 5px 20px;
    color:#222f3e ;
    font-size: 16px;
    font-weight: 600;
    
}

header li:nth-child(1){
    margin-right: auto;
}

header li .link:hover{
    background: #222f3e;
    color: #fff;
    border-bottom: 4px solid #fff ;
    transition: .7s;
    border-radius: 5px;
}

header .navbar .dropmenu{
    list-style: none;
    background: #fff;
    width: 200px;
    height: 60px;
    position: absolute;
    top: 55px;
    right: 146px;
    display: none;

}

header .navbar .dropmenu li{
    margin-bottom: 5px;
    
}

header ul .dropmenu li .dropLink{
    text-decoration: none;
    display: block;
    color: #000000;
    font-weight: 600;
    padding: 10px 20px;
    background: #fff;

}
header ul .dropmenu li .dropLink:hover{
 background: #000000;
 color: #fff;
}

header .navbar .about:hover .dropmenu{
    display: block;
}

If you any issue please share your comment below

(Visited 319 times, 3 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here