Css Menu Vertical

Css Menu Vertical Type :Hover

CSS Style:


 #cssmenu1
        {
            width: 200px;
            border-style: solid solid none solid;
            border-color: #94AA74;
            border-size: 1px;
            border-width: 1px;
            font-size: 14px; /*color:#000000;*/
            font-family: Arial, Helvetica, sans-serif;
        }
        #cssmenu1 ul
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        #cssmenu1 li a
        {
            height: 32px;
            height: 30px;
            text-decoration: none;
            font-weight: normal;
        }
        #cssmenu1 li a:link, #cssmenu1 li a:visited
        {
            color: #5E7830;
            display: block;
            background: url(../Images/Button/menu1.gif);
            background-repeat: no-repeat;
            padding: 8px 0 0 10px;
        }
        #cssmenu1 li a:hover
        {
            color: #26370A;
            background: url(../Images/Button/menu1.gif) 0 -50px;
            background-repeat: no-repeat;
            padding: 8px 0 0 10px;
        }
        #cssmenu1 li a:active
        {
            color: #26370A;
            background: url(../Images/Button/menu1.gif) 0 -64px;
            background-repeat: no-repeat;
            padding: 8px 0 0 10px;
        }

aspx Design Page :

<div id='cssmenu1'>
        <ul>
             <li>
                   <a href='#'>
                       <span>Home</span>
                   </a>
              </li>
                <li>
                   <a href='#'>
                       <span>About Us</span>
                   </a>
              </li> 
               <li>
                   <a href='#'>
                       <span>View</span>
                   </a>
              </li>
               <li>
                   <a href='#'>
                       <span>Profile</span>
                   </a>
              </li>
      </ul>
 </div>

Menu Image:

                                    

Screen :