OK, in the meantime I’ve reverted back to Pullo’s original suggestion of simply creating #header ul.menutop li:last-child{ margin-left:250px; } just so that it’s working in FF, Chrome, and IE9. Haven’t tested in IE8 or lower yet. I’m trying to soak in your explanation of floating, but please bear in mind I’m quite the novice. I think I understand in principle. Regarding this specific issue, however, you’ve created the CSS directly into the markup, and I can’t do that because all the markup is generated by Joomla’s php files, which I am in no way comfortable editing.
At this point, I just wonder how to get the results Pullo’s fix yielded, but using your method, which you both seem to agree makes more sense.
This is the CSS file, in full, for the module that styles the menu:
/* body {font-family:Helvetica,Arial,sans-serif;font-size:12px;} Dunno why this is here, but was part of CSS that came with module. Edited whole site, not just menu, so commented out */
/* Sitepoint Addition - This moves the final menu item (Register Online) to the right, separating it from the rest of the menu items...
The "Register Online" menu item WILL GET MESSED UP if any top-level menu items are added, deleted, or edited in any way that alters the
width of the overall menu system. Should that happen, simply edit the margin-left below until fixed... */
[B]#header ul.menutop li:last-child{margin-left:250px; }[/B]
/*
[I]#header ul.menutop li{ float:left; }
#header ul.menutop .item214{ float:right;margin-right:20px;}[/I]
*/
/* CORE */
.menutop,.menutop * {margin:0;padding:0;}
.menutop {float:left;position:relative;padding-bottom:2px;}
.menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
.menutop li a.item {cursor:pointer;}
.menutop li span.item {cursor:default;outline:none;}
.menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
.menutop li li .item,
.menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
.menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
.menutop li li {position:relative;float:none;}
/* Drop Downs */
.menutop ul {width:130px;position:relative;}
/* Level 1 */
.menutop li .item {
text-decoration:none;
display:block;
padding:0 15px;
background:#ddd;
border-color:#eee #ccc #ccc #eee;
border-style:solid;
border-width:1px;
color:#333333;
text-decoration:none;
}
.level1 .f-mainparent-itemfocus .item {
background:#ccc 100% 100% no-repeat;
border-color:#ddd #bbb #bbb #ddd;
border-style:solid;
border-width:1px;
}
.menutop li:hover > .item {
background-color:#ccc;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
}
.menutop li:hover > .daddy:hover {
background-image:url(../images/top-light.png);
background-position: 100% 100%;
}
/* Level 2 */
.menutop .level2 li > .item {
background:#ccc;
border-color:#ddd #bbb #bbb #ddd;
border-style:solid;
border-width:1px;
}
.menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {
background-image:url(../images/level2-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}
.menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {
background:#bbb;
border-color:#ccc #aaa #aaa #ccc;
color:#333;
}
.menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {
background-image:url(../images/level3-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}
/* Level 3 */
.menutop .level3 li > .item {
background:#bbb;
border-color:#ccc #aaa #aaa #ccc;
border-style:solid;
border-width:1px;
}
.menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {
background-image:url(../images/level3-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}
.menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {
background:#aaa;
border-color:#bbb #999 #999 #bbb;
color:#333;
}
.menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {
background-image:url(../images/level4-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}
/* Level 4 */
.menutop .level4 li > .item {
background:#aaa;
border-color:#bbb #999 #999 #bbb;
border-style:solid;
border-width:1px;
}
.menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {
background-image:url(../images/level4-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}
.menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {
background:#999;
border-color:#aaa #888 #888 #aaa;
color:#333;
}
/* regular hover
.menutop li:hover .item:hover, .menutop li.active .item:hover {
background-color:#2c87c0;
border-top:1px solid #138fdc;
border-left:1px solid #138fdc;
border-right:1px solid #0d5f92;
border-bottom:1px solid #0d5f92;
color:#fff
}
*/
.menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {
background-image:url(../images/hover-parent.jpg);
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* seperator hover */
.menutop span.item:hover,
.menutop li:hover span.item:hover {
background-color:#666;
border-top:1px solid #777;
border-left:1px solid #777;
border-right:1px solid #555;
border-bottom:1px solid #555;
color:#fff
}
.menutop li:hover span.daddy:hover {
background-image:url(../images/sep-parent.png);
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* Root Items */
.menutop li.root {width:auto;float:left;height:30px;}
.menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
.menutop li.root:hover > .daddy:hover {
background-image:url(../images/top-light.png);
background-position: 100% 100%;
}
.menutop li.root > .daddy, .menutop li.root:hover > .daddy {
background-image: url(../images/top-dark.png);
background-position: 100% 100%;
background-repeat: no-repeat;
}
/* Active Items
.menutop li.active > .item {
background-color:#EE501C;
border-color:#F86134 #D24916 #D24916 #F86134;
color:#fff;
} */
.menutop li.active > .daddy {
background-image:url(../images/hover-parent.jpg);
background-repeat: no-repeat;
background-position: 100% 50%;
}
.menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {
background-image:url(../images/top-light.png);
background-position: 100% 100%;
}
/* No JS */
.menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:130px;top:0;}
.menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
.menutop li:hover ul,
.menutop li.sfHover ul {left: 0;top:32px;}
.menutop ul {width:130px;}
.menutop li li:hover > ul, .menutop li li.sfHover > ul {left:130px;top: 0;}
.menutop .level2 li {position:relative;float:left;width:100%;}
/* Fusion Pill */
.fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
.fusion-pill-r {margin-left: -12px;height: 35px;}
/* Fusion JS */
.fusion-js-container {
display:block;
height:0;
left:0;
overflow:visible;
position:absolute;
top:0;
z-index:600000!important;
background:transparent !important;
}
.fusion-js-subs {
display:none;
margin:0 0 0 -2px;
overflow:hidden;
padding:0 2px;
position:absolute;
}
/* Paul O'B from Sitepoint Addition - This squished the menu height and left-aligned the text in sub-menus. Beautiful!!! */
#header ul,
#header ul.menutop li,
#header ul.menutop li a,
ul,
ul.menutop li,
ul.menutop li a{
font-family: garamond, georgia, monotype corsiva, calibri;
font-size:12px;
padding:0;
height:auto;
}
#header ul.menutop li a,
#header ul.menutop li.active a{
padding:0 5px;
height:auto;
}
.fusion-js-subs li{
text-align:left;
padding:0;
}
.fusion-js-subs li a{
padding:0 5px!important;
}
#header ul li a {
font-weight: bold;
}
Now, there are other CSS files that Joomla calls that impact the menu, mainly one called layout.css which is actually where the offending #header ul {position:absolute} lies. Commenting that out is what dropped the entire menu below the slideshow, and that doesn’t work. :-(. My primary goal is to get it working, and with Pullo’s #header ul.menutop li:last-child{ margin-left:250px; } code, it does. My secondary goal is to learn more. 
That being said, the “right” way is definitely preferable to me. 
Can an edit to this existing code be performed to accomplish this?
THANKS for the continued help, gents!
But I then tried your first bit of code