Because search engine spiders look for the type on your page. If you do a graphic rollover, there is no type.
I have seen this techniques done with graphics for the rollover and the type set up far out of the page to fool the spiders. Spiders don't like that, and sooner or later they'll outlaw it.
This will give you a small CSS file you can carry with you to make vertical CSS rollover navigation bars. You do NOT have to follow my lead in this. In fact, it would be much better if you made a CSS navigation bar that you really like that you can use on your sites.
It will be easier for you if you make this a new site, but it is not necessary. Just save it into a folder called something that makes sense to you.
On this page type in the type as seen above. Change the wording to fit your needs. Remember, this is just one for me. You need to make this your own. Select the type and make it an Unordered list.
Click the button to make a new style. When the dialog box opens, make sure that the radio button next to Class (can apply to any tag) is chosen. Then type .navcontainer for the Name and set the Define in: option to (New Style Sheet…) as you see in the capture. When you click OK you’ll get an option to save the new Style Sheet you are creating. Call it navbergsland.css (or whatever makes sense to you). Obviously you can name it whatever you like, as long as you can figure out what you did several months from now.
Click on the Box page and set the width at 180 pixels. Then uncheck both Same for All checkboxes and set both Left: fields at 0 pixels.
Go to Code View and select the unordered list including the <ul> & </ul> tags that surround the list, then choose Insert> Layout Objects> Div Tag from the menu bar up top. When the dialog opened choose navcontainer as the class, and Wrap Around Selection in the popup menu at the bottom.
Nothing will change visually on the page, but <div> to </div> tags now enclose the selected copy. This enables us to apply styles to it alone (or any other div named navcontainer).
We need to create a style that will format unordered lists within the navcontainer div. To do this we must begin the name of the new style with .navcontainer (the period in front is necessary). The name of this new style will then be .navcontainer ul (making sure there is a period in front and a space between the div name and the paragraph tag). Check the radio button in front of Advanced (which controls contextual selectors and other special tags). Then set your type options (you can see my choices below), your box options need to have the left padding and margin set to zero, and the list type set to none. Note: I actually gave mine a purple background and some padding to keep the type inside the colored box.
Then set up the li styleThis style will control the look of the individual paragraph within the unordered list. I gave mine a slightly different color and added a solid bottom border of 1 pixel. You can see the results below.
Make a new style, name it .navcontainer a:link (making sure there is a period in front and a space between the div name and the link tag) and set up the type background block. You can make it the same as the ul and li tags — or make it different so that lines with links are more obvious. Do the same with the colors, borders, and so on. You will need the following CSS link styles:
I designed this one so that the link turns red when I hover over it and turns gray once I have visited the link. As you can see with the navbar on this page, I took it a little further later. You don't have to like my solutions, but the technique is certainly worthwhile to adapt to your uses.
If the link above is gone, you can probably find what you need in one of Dave McFarland's books. He is the author of Dreamweaver CS3: The Missing Manual and CSS: The Missing Manual (among many others). His site is: www.sawmac.com