Mon Jul 04 2022

Menu Filling Effect on Hover

CSS5496 views

Menu Filling Effect on Hover

File Name: Menu-filling-effect.html

<!DOCTYPE html>
<html lang="en">
    <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>Menu Filling Effect</title>
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin>
    <link href=";500&display=swap" rel="stylesheet">
        * {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;

        body {
            background-color: #383838;

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;

        ul#menu {
            list-style: none;
            width: 250px;

        ul#menu li {
            margin: 8px 0;
            position: relative;
            background-color: #2b2b2b;
            border-radius: 2px;
            overflow: hidden;

        ul#menu li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            transition: 0.3s all ease-in-out;

        ul#menu li:nth-child(1)::before {
            background-color: #4185f3;

        ul#menu li:nth-child(2)::before {
            background-color: #f1b504;

        ul#menu li:nth-child(3)::before {
            background-color: #e44134;

        ul#menu li:nth-child(4)::before {
            background-color: #32a250;

        ul#menu li:hover::before {
            border-radius: 0 50px 50px 0;
            width: 110%;

        ul#menu li a {
            display: block;
            padding: 10px 20px;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            position: relative;
            z-index: 1;
        <ul id="menu">
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Our Services</a></li>
            <li><a href="">Contact Us</a></li>

Result Screenshot(s)

Menu Filling Effect on HoverWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.