Vertical Menu Bar on the main page.

[Bernard Lama]

Step 1

Copy and paste the below code into Advanced CSS

/*        Vertical Menu Bar       */

*{
    list-style:none;
    margin:0px;
    padding:0px;
}

   
#menu {
    width: 200px;
    border-style: solid solid none solid;
    border-color: #94AA74;
    border-size: 1px;
    border-width: 1px;

    }
   
#menu li a {
    height: 32px;
      voice-family: "\"}\"";
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }   
   
#menu li a:link, #menu li a:visited {
    color: #5E7830;
    display: block;
    background: url(images/menu1.gif);
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }
   
#menu li a:hover {
    color: #26370A;
    background: url(images/menu1.gif) 0 -32px;
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }
   
#menu li a:active {
    color: #26370A;
    background: url(images/menu1.gif) 0 -64px;
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }

Download the attached file and use it as menu background..

Step 2

Copy and paste the below code into Text box

<div id="menu">
        <ul>
            <li><a href="#1" title="Home">Home</a></li>
            <li><a href="#2" title="About">About</a></li>
            <li><a href="#3" title="Services">Services</a></li>
            <li><a href="#4" title="Portfolio">Portfolio</a></li>
            <li><a href="#5" title="Store">Store</a></li>
            <li><a href="#6" title="Download">Download</a></li>   
        </ul>
    </div>

Example:

[The Internet Junkie]

Great tip but, you need to target a value with the code you are using below in order to hide the bullets.

Change this:

{list-style:none;margin:0px;padding:0px;}

To this:

#menu li {list-style: none;margin: 2px;padding:0px;}

 

[Bernard Lama]

That's right... thanks for adding strawberry flavour lol

[The Internet Junkie]

I think it was more along the lines of, Hot Fudge Topping. =)