qzm
4/27/2016 - 8:58 AM

Vertical Navigation Bar

Vertical Navigation Bar

vertical-navigation-bar.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <style>
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 200px;
                background-color: #f1f1f1;
            }

            li a {
                display: block;
                color: #000;
                padding: 8px 0 8px 16px;
                text-decoration: none;
            }

            li a.active {
                background-color: #4CAF50;
                color: white;
            }
            li a:hover:not(.active) {
                background-color: #555;
                color: white;
            }

        </style>
    </head>
    <body>
        <ul>
            <li>
                <a class="active" href="#home">Home</a>
            </li>
            <li>
                <a href="#news">News</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
            <li>
                <a href="#about">About</a>
            </li>
        </ul>

    </body>
</html>