Skip to content

CSS Classic Menu

CODEPEN


HTML

<body>

    <div class="container-fluid">
        <nav class="menu-bar">
            <ul>
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">ABOUT</a></li>
            </ul>
        </nav>
    </div>

</body>

CSS (SASS)

body{
    padding: 0;
    margin: 0;
    .container-fluid{    
        height: 30px;

    }
    .menu-bar{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #262626;
        li{
            display: block;
            float: left;
            padding: 10px 20px;
            transition: .3s;
            cursor: pointer;
            
            a{
                text-decoration: none;
                color: #eee;
                transition: .3s;
            }
            &:hover{
                background: #eee;
                color: #262626;
            }
            &:hover >a{
                color: #262626;
            }
        }
        .active{
            background: #eee;
        }
        .active > a{
            color: #262626;
        }
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: