If you also create this type of menu and navbar using CSS so this video only for you because I share all the source code with you and if you want to How to create down to up hover menu with CSS so read the article till the end.
If you want How to create down to up hover menu with CSS follow this
- Create a saprate HTML and CSS file
- When i give you a code properly copy and paste
Create a Hover Menu use this code in HTML file
If you create a html file with .html extension name so put below code in your body tag
<ul>
<li>Home</li>
<li>Service</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
when you put the HTML code in you file than after follow next step,
Use this code in your CSS file
Use CSS for styling you menu so that create a CSS file with .css extension name.
*{
margin: 0;
padding: 0;
font-family:
"Poppins", sans-serif;
}
body
{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
ul
{
list-style: none;
display: flex;
overflow: hidden;
}
li
{
padding: 5px 15px;
z-index: 1;
position: relative;
transition: 0.3s ease;
}
li::before
{
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: rgb(49, 131, 255);
transform: translateY(25px);
transition: 0.5s ease;
}
li:hover::before
{
transform: translateY(0px);
border-radius: 5px 5px 0 0;
}
li:hover
{
color: white;
cursor: pointer;
}