Drop-down menu HTML and CSS
DOWNLOAD PDF:-Click here
Coding
<!DOCTYPE html>
<html>
<head>
<title>Drop-down</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.menu{
display: flex;
list-style: none;
font-weight: 350;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19),
0 6px 6px rgba(0,0,0,0.23);
}
.menu-list{
position: relative;
padding: 10px 20px;
border-right: 1px solid #EEEEEE;
color: black;
transition: background 0.2s linear;
}
.menu-list:hover{
background: orange;
}
.sub-menu{
display: block;
position: absolute;
width: 100%;
left:0;
top:55%;
opacity: 1;
transform-origin: bottom;
transform: scaleY(0);
transition: all 0.1 linear;
}
.has-child:hover .sub-menu{
opacity: 1;
transform: scaleY(1);
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-list">home</li>
<li class="menu-list">about</li>
<li class="menu-list has-child"><span>projects</span> <i class="fas fa-sort-down"></i>
<ul class="menu sub-menu">
<li class="menu-list sub-menu-list">html</li>
<li class="menu-list sub-menu-list">css</li>
<li class="menu-list sub-menu-list">javascript</li>
<li class="menu-list sub-menu-list">php</li>
<li class="menu-list sub-menu-list">ruby</li>
</ul>
</li>
<li class="menu-list">contact</li>
</ul>
</body>
</html>
No comments:
Post a Comment