My pure CSS Vertical Menu

---

Maybe my pure CSS Vertical Menu is a little misleading, being that I took the majority of it from this site, but I did have to make a few tweaks to it to make it function the way I wanted to for the website I was building. It took quite a bit of digging to find the information to make it work, so I thought I'd share that with you to try and ease potential troubles you might be experiencing.

This is the menu I built for my mother-in-law's business Carol's Creature Care. Here is the link that will show you what the menu will look like standing alone, just the menu and a stock dreamweaver template.

Pure CSS Vertical Menu Finalized page.

Here is a link that shows the html portion of this and the CSS code.

Piece of cake, yes? Not for me it wasn't. As I said earlier, I built the CSS menu using the code at this website. Here is what that menu ends up looking like on a stock dreamweaver template.

Click here to see it.

The problem was when I tried to put this code into use on the website I was building, this is what ended up taking place. Click here to see.

As you can see, it turned out looking like garbage. The links that didn't have a sub menu showed as normal html links. They were underlined in my buttons, and they started off as blue when unclicked and then changed to purple once selected. They acted just like normal html links.

So how did I get it to go from looking like garbage here to looking like a normal vertical menu here?

The first thing I had to do was create a style rule to keep my links white before they were clicked on, and for them to continue to stay white after they were clicked on. I did this by adding in this code before my menu. Click here to see the html.

After doing that, my vertical menu now looked like this, click here to see.

As you can see, it didn't completely solve my problem. So I made the last change required, I altered the html in the actual link itself to remove the underline effect of a link and to keep the color status of the link white at all times. Click here to see the html code.

There you have it. A pure css vertical menu. I probably made that ten times harder than it needed to be, but it works all the same. If anyone has an easier way to do it, I'd love to hear it. Please leave me a comment.

I hope this was helpful.