VERTICAL MENU using only HTML AND CSS

First create HTML file as given here

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" href="css/primary.css">

    </head>

    <body>

        <div id="container">

            <h1>phpacadmy</h1>

            <ul class="menu">

                <li><a href="#">Home</a></li>

                <li><a href="#">Contact Us</a></li>

                <li><a href="#">About Us</a></li>

                <li><a href="#">Forum</a></li>

                <li class='selected'><a href="#">Login</a></li>

                <li><a href="#">Register</a></li>

             </ul>

        </div>

    </body>

</html>

Create CSS file as given here:

.menu{

    list-style: none;

    padding: 0;

    margin: 0;

    width: 150px;

    border: 1px solid #eee;

}

.menu li a{

    display: block;

    padding: 8px;

    border: 2px solid #ddd;

    border-bottom: 1px solid #aaa;

    font: 1em Georgia;

    color:#555;

    zoom: 1;

}

.menu li a:hover{

    background: #000;

    color: #fff;

}