Code:
/* 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... */
#header ul.menutop li:last-child{margin-left:250px; }
/*
#header ul.menutop li{ float:left; }
#header ul.menutop .item214{ float:right;margin-right:20px;}
*/
/* 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. ;-)
Reply With Quote
Originally Posted by dresden_phoenix
Bookmarks