Spry bar problem

Question

I've imported the spry bar for from the David Powers Tutorial, the 2.0 widget for the Bayside Pulse website, I have styled it in my own design, done every thing he said everything fine, I added the fifth top level menu button to the menu bar Cafe Citrus, but in my case Inspections, I took out all the stuff I did not want and put in all the stuff I did want, everything still going great, Checked it in live view looked good, saved it, and then went back to live view and there was an extra button on the end with nothing in it, I have tried to get rid but I cant sort it, not a clue. Can any one help please?

Answer 1

@Jeffrey
I received your PM with the link to your site.
Because you are using SpryMenuBar v2.0 and have probably styled the bar within the Widget Browser, once applied to your document it becomes a nightmare for newbies to make any styling changes.
In your case, you have (or the Widget Browser) as constructed the menu bar to use the MenuBar and an overriding MenuBarRightShrink classes as per
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
    widgetID: "MenuBar",
    widgetClass: "MenuBar  MenuBarRightShrink",
    insertMenuBarBreak: true,
    mainMenuShowDelay: 100,
    mainMenuHideDelay: 200,
    subMenuShowDelay: 200,
    subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
The style rules for MenuBarRightShrink makes the menubar float right with a width of auto as per
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
The above style rules are contained within a style sheet called consultant_cs5.css
When we now look to see how the stylesheets are loaded, we see the following
<link href="consultant_cs5.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
This means that any rules targetting the same selectors in consultant_cs5.css will be overridden by those in SpryMenuBasic.css. Line 31 in SpryMenuBasic.css says
.MenuBar {
     float: left;
     width: 100%;
So now, instead of a right floating auto width menubar we have a left floating menubar covering the full width of the div.
If you swap the two stylesheets so that SpryMenuBasic.css loads before consultant_cs5.css, you will find that the situation is reversed and that the menubar will again be an auto width.
Gramps