Are there any CSS best practices that will help our SEO and maximize natural search positions for our important keywords?
Correctly done JS menus will not hamper SE's from indexing the pages. There are some very good ones and equally there are some very bad ones.
I would personally never use a JS menu for various reasons but mainly because I start limiting the amount of people who can access my sites.
Probably the easiest way of making a menu is to use an list-item. I say this becuase if you search for CSS menu templates most are created this way. I always use a list-item method because I find it easy to style and simple to configure.
There are no bad practices that I can think of. As long as the code is this kind of simple you'll have no problems:
What about class names and ID names for styling. Are those picked up by any robots? Best practices for CSS is to make the name descriptive of what the item contains. Navigation many times on a large site is dynamic and trying to make any sort of keyword rich selectors is not as helpful from a coding stand point.
For navigational elements or nested elements, like unordered lists, it is common to style the tag and not use a custom selector.
The ID and class names won't make a single bit of difference to your rankings.
How you code it depends on personal preference really. I tend to flip between:
<ul class="blah"> <li></li> </ul>
<div class="blah"> <ul> <li></li> </ul>
I try to keep the LI's clear of ID's or classes because I sometimes need to style the first/last LI differently from the others. I might also need an active class for the active page. In all these cases keeping the LI's clear make it easier for me to see clearly what's going on.