Drop-Down Menu giving me some trouble - RokNavMenu

[Billerica-IT]

Hi all,

I am working on a new site for our local youth baseball league. End result won't be insanely fancy. Test site is here:

http://joomlatest.chrisbartlett.net/

What I am trying to do is get an operational drop-down menu at the top. You can see it in all it's not-so-operational glory. LOL! To do this, I installed a module called RokNavMenu:

http://www.rockettheme.com/extensions-joomla/roknavmenu

If you would, please look at the two attached screenshots. One is the menu when set to "default". This is actually the look I prefer, but as you can see in "Contact" for example, the sub-menus appear without need to hover to get them.

The 2nd screenshot is with the style set to "Fusion". This actually works (sort of), but as you can see, the whole thing gets thrown to the right.

I cannot seem to find any way IN the Joomla Administrator to edit CSS or any of the files associated with this module, but via FTP, I found this CSS file related to "Fusion".

Code: Select all

body {font-family:Helvetica,Arial,sans-serif;font-size:12px;}

/* 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:175px;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.png);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/active-parent.png);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:170px;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:175px;}
.menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;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;}

It's been nearly 7 years since I played with CSS code, and while this is not completely foreign to me, it's certainly not as obvious as it used to be.

Can someone give me a hand, please? Ultimately, what I would like is for the "Default" style to work. But anything functional will do. Thanks!!!

Chris