Lets go one by one:
The class name is “sf-menu” not “sf menu” (a dash, not a space). In your CSS theme, the selector should be .sf-menu … I’ll check to be sure the doc is correct here.
The one pixel border is coming from the sample CSS in the superfish.css file (this is also where that light blue color and other settings are when you first add the widget). The easiest way to suppress it is to add “border: none;” to every relevant class (there are more elegant ways using resets, but let’s start fast and simple).
Assuming the DIV is the region, and you want the Nav widget centered in that region, then what you are trying to do is center a block element (the DIV that is the nav) within another block element (the region DIV). The “text-align: center” and similar properties in CSS only center inline elements, like text, within the surrounding block element. To center a block element within another block element, you need to specify a width for the element (in this case, an overall width for the Nav widget element, then set margin-left and margin-right to “auto”.
Here’s an example CSS for centering the container (outermost) region, but the same css works for any other div you want to center:
You could replace “#container” with a CSS class name that is on the DIV you want to center. Remember, you must set an overall width to center a block element in HTML (the width can be a percentage if you want it to be variable size). That’s not a CM1 thing, just a limitation of browsers and HTML centering period.
- Roll-over expansion - in general - requires a fixed width for nav entry boxes. The reason is that the offset of the “next drop menu” has to exactly line up with the width of the prior level. Now, if you’re only using a single level of drop down, then you can suppress the width (set width to auto) and should will still work. You’ll need to tell the nav widget to only show the right number of levels of your nav in this case.
E.g. Suppose your nav is like this
Home (level 1)
About GSW, Admin, … (level 2)
Location, Mission Statement, … (level 3 under “About GSW”)
Directions, Facilities (level 4 under “Location”)
Set the nav widget to show levels 2 to 3 and you’ll have only one drop menu as a result. This first drop menu only has a vertical offset (it only expands downward) so you’re free to set the width to auto. You will need to set the height of the top level (level 2 of the overall nav) so that first drop menu doesn’t drop down too far (see below for more), but here the width can vary.
If you want that 4th level in the nav to be there and be expandable, then you have to fix the width of the third level, because the 4th level expands out to the right of the third level, by exactly the width of the 3rd level drop menu box.
Once you have some idea what’s possible given how many levels you want to have expandable, then you get to the question of how to set it. The best way is using .sf-menu combined with li and or ul.
I posted the BrightVovage theme here. Get it and copy the “navigation starts here” part of the CSS into your theme to start.
In BV, I pulled apart the CSS settings, and commented heavily on the size and offsets, and what and where height and width offsets need to match, and also some other things (like border-left set to none!). The BV “look” does not call for much of these drop menu effects, but the selectors in there still work at least as a better staring point. I can help you tweak it from there.
BTW, we’re writing up a whole new doc section just on how to style the nav.
Finally, you can still use background images and not solid colors for your top level and even the drop levels, but lets do one effect at time.