Drop Down Menu - SEO Friendly?

sorry, I forgot to write css for the menu here it is:

/* Hor. Drop Down Menu v0.01 Built10072008 Created By jkofte */
ul#navigation-1
	{ margin:0; padding:1px 0; list-style:none; width:100%; height:27px; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#dddddd; background-color:#333333; background-image:url(../images/menubg.gif); background-repeat:repeat-x; z-index:1000;}
ul#navigation-1 li
	{ margin:0; padding:0; display:block; float:left; position:relative; width:100px; z-index:1000; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
	{ padding:5px 0 8px 0; display:block; text-align:center; text-decoration:none; color:#dddddd; width:100px; height:13px; z-index:1000; }
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
	{ padding:5px 0 8px 0; display:block; text-align:center; text-decoration:none; color:#ffffff; width:100px; height:13px; background-image:url(../images/menubg2.gif); z-index:1000;}
	
ul#navigation-1 li ul.navigation-2
	{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#888888; width:130px; position:absolute; top:26px; left:-1px; border:1px solid #888888; border-top:none; z-index:1000; text-align:left; text-indent:3px }
ul#navigation-1 li:hover ul.navigation-2
	{ display:block; z-index:1000; text-align:left; text-indent:3px}
ul#navigation-1 li ul.navigation-2 li
	{ width:98px; clear:left; width:98px;  z-index:1000; text-align:left; text-indent:3px}
 
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
	{ clear:left; padding:5px 0 7px 0; width:130px; border:none; border-bottom:1px solid #888888; position:relative; z-index:1000; text-align:left; text-indent:3px }
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover	
	{ clear:left; background:#555555; padding:5px 0 7px 0; width:130px; border:none; border-bottom:1px solid #888888; position:relative; z-index:1000; text-align:left; text-indent:3px}
ul#navigation-1 li ul.navigation-2 li a span
	{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; z-index:1000; text-align:left; text-indent:3px}
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
	{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; z-index:1000; text-align:left; text-indent:3px}

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

You can see the above menus in action at my store (www.closeoutcctv.com).  I can guarantee these links are SEO friendly, because we spend a lot of time working with SEO, and all these links have been indexed.  The problem is it's difficult to make a drop down menu SEO friendly, not only because of hidden text penalizations (which honestly don't really apply in this case) but also because you can't have much context with them.  SEO works best with context.

So, I wouldn't rely on this menu to up your visibility.  Use other elements like in paragraph links and a true left NAV menu (believe it or not, left nav is the best to use, because it's familiar to people.  No matter how cool another menu is, it's always best to use a familiar UI layout.  Just ask Sony!)

Look for css-driven drop down menu solutions, they are search engine friendly.  For multi-level menu's each should be rendered as a list item <li> .. </li> in the overall structure.

allow to repeat and correct a small typo:

Look for css-driven drop down menu solutions, they are search engine friendly.  For multi-level menu's each node should be rendered as a list item <li> .. </li> in the overall structure.

thanks everyone . .
looks like the suckerfish one is the most light weight,
but formatting it to make it look good is going to be the challenge.

jkofte, thanks for that menu. But can it be used with a drop down,
with other options underneath the names? I like the way it looks.

jkofte, . . that menu is not working in IE 6, which I'm using.
The menu works in Firefox though.

jamesbcox1&,
Are you using suckerfish for the "Security Cameras" menu?
Also, in IE 6, the "down-arrow" graphic next to "Security Cameras" and
other heading is not showing. I'm seeing a little grey box:
http://www.closeoutcctv.com/v/vspfiles/assets/images/down-arrow.png

Also, a little explanation about jQuery.  jQuery is a JavaScript file which adds several new and useful "user-defined functions" or UDFs to your JS functionality.  This is called a JavaScript extension library, or just library.  It doesn't do anything by itself, but simply provides a shortcut to a lot of commonly used applications that normally require a lot of the same coding over and over.  Things like animations, AJAX calls, etc.   A [very] quick and simple example would be this:

Instead of writing a out a long line of code to manipulate HTML in a document:

document.getElementById("content_area").innerHTML="some html";

you would write:

$("#conent_area").html("some html");

That may not seem like much, but try to think on a larger scale here.  There are apps that require an entire page of programming just to make a single HTTP request to get new content, and that's not even the code required to actually add the content.  jQuery reduces all of that to a single line of code.

Now, you could consider JavaScript to be a new language now that jQuery has been created, and many programmers are now just using jQuery to do many of their applications.  Some are good, some are ok, and some are just plain ugly, but the fact is that the application depends on the author.  jQuery has significantly changed lives and sped things up for some people, but it's more of a means to an end.

Asking if jQuery is good in reference to a particular application is like asking if the metal is good on a Ford.  It's somewhat of a moot point.  jQuery is the structure, the fabric, the framework that the application was built on.