Hi there, I’m completely stumped. I’ve created a horizontal menu using sf, and the menu will show when you mouseover the main link, but loses focus when you move your mouse to the menu itself. If I change the .sf-menu ul portion of the css, changing the top descriptive, then you are able to mouse down to the menu, but the menu won’t disappear. I can’t figure out how to fix this, help!!! It’s a cms site developed in cms made simple. Here is a copy of the css:
/* RESETS --------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-size: 100%;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
background: transparent;
}
dfn {
display: none;
}
img, img a
{max-width: 100%;}
/* PAGE ELEMENTS --------------------------*/
body {
margin: 0;
padding: 0;
background: #950819 url('uploads/images/main-bkgrd.jpg') repeat-x;
text-align: left;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
font-size: 10.5pt;
line-height: 16pt;
}
/* Floats, Clears */
.clear {
clear: both;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
img.aligncenter {
margin-top: 7px;
margin-bottom: 5px;
}
img.alignright {
padding: 0px;
margin: 0px 0 0px 0px;
display: inline;
}
img.alignleft {
padding: 0px;
margin: 0px 0px 0px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/*TYPOGRAPHY */
p {
text-align: left;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
font-size: 10pt;
line-height: 17pt;
margin: 0 0 10px 0;
}
h1 {
text-align: left;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
font-size: 17pt;
line-height: 22pt;
color: #87061e;
}
h2 {
text-align: left;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
font-size: 17pt;
line-height: 22pt;
color: #87061e;
text-shadow: 1px 1px 0px #fff;
}
h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
}
h3 {
font-size: 14pt;
line-height: 20pt;
color: #930515;
}
h4 {
font-size: 14pt;
line-height: 20pt;
color: #36C;
}
h5 {
font-size: 1.2em;
line-height: 1.4em;
color: #930515;
}
h6 {
font-size: 1.1em;
line-height: 1.4em;
color: #930515;
}
a.ideaarts span {
font-weight: bold;
color: #3693c9;
}
a:link, a:visited {
font-weight: bold;
text-decoration: none;
outline: none;
color: #87061e;
}
a:link, a:visited {
-webkit-transition: color .2s linear;
}
a:hover {
color: rgba(145,11,36,.8);
}
blockquote {
display: block;
font-size: 100%;
background: transparent;
width: auto;
font-style: italic;
margin: 15px 0;
padding: 0 20px;
border: none;
line-height: 150%;
color:#404040;
}
/* PAGE STRUCTURE */
/* Header part */
#pageHeaderOuter {
background: #ffffff;
width: 960px;
margin: auto;
position: relative;
}
#pageHeader {
width: 960px;
margin: auto;
height: 142px;
position: relative;
background: #ffffff;
}
#pageNavigation {
background: #950717 url('uploads/images/nav-bkgrd.jpg') repeat-x;
height: 30px;
width: 940px;
padding: 4px 10px;
margin: auto;
}
#pageContentOuter {
background: #ffffff;
width: 960px;
margin: auto;
position: relative;
}
#pageWrapper {
width: 940px;
margin: 20px auto;
background: #ffffff;
}
/* Content part */
.pageContent {
}
.pageContentSide {
float: left;
width:940px;
display:inline;
background: #ffffff;
padding: 10px;
}
h2.contentTitle {
background: #ffffff;
padding-bottom: 35px;
font-size: 2.6em;
}
.pageContent p {
/*text-shadow: 1px 1px 0px #fff;*/
}
/* Content Blocks */
.infoBlockWrapper {
background: url('uploads/BizBuzz/images/infoBlockShadow.gif') no-repeat bottom right;
padding-bottom: 40px;
margin: 10px 0;
position: relative;
}
.infoBlock {
background-color: #cccccc;
color: #000000;
padding: 10px;
border: 1px solid #ebebeb;
}
.infoBlock h2, .infoBlock p {
color: #000000;
text-shadow: none;
}
.infoBlockGroup {
width: 300px;
margin: 10px 20px 10px 0;
min-height: 200px;
float: left;
background: #626262;
}
.infoBlockGroup h3 {
background: #000000;
color: #464545;
padding: 5px 5px 0 10px;
height: 2.0em;
}
.infoBlockGroup a {
color:#ffffff;}
.infoBlockGroupInner {
padding: 10px;
background: #626262;
}
.infoBlockGroup.last {
margin: 10px 0 0 0;
background: #626262;
}
/* Footer part */
#pageFooter {
width: 940px;
background: #626262;
min-height: 200px;
margin: auto;
position: relative;
}
#pageFooterInner {
width: 940px;
padding: 10px;
margin: auto;
color: #cccccc;
}
#pageFooterInner .infoBlockGroup p, #pageFooterInner .infoBlockGroup h3 {
color: #fff;
background: none;
}
.copyright {
display: block;
color: #fff;
padding:10px;
border-top: 2px groove #ba0b2c;
}
.copyright a, .copyright p {
color:#fff;}
/* END OF STRUCTURE */
/* NAVIGATION */
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 15em;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
z-index: 999;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 2.6em;
z-index: 99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
left: 15em;
top: 0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
left: 15em;
top: 0;
}
.sf-menu {
float: left;
margin-bottom: 1px;
}
.sf-menu li a:link, .sf-menu li a:visited {
display: block;
font-size: 0.9em;
line-height: 28px;
color: #fff;
background: transparent;
padding: 0 5px;
font-weight: bold;
-moz-text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
-webkit-text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
text-transform: uppercase;
border: none;
text-decoration: none;
margin-right: 5px;
}
.sf-menu li a:hover, .sf-menu li a:active, .sf-menu li a.current {
line-height: 26px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0,0,0,0.25);
background: #7e0219;
padding:0 4px;
}
.sf-menu li li a:link, .sf-menu li li a:visited {
background: #7e0219;
text-transform: none;
text-shadow: none;
height: 26px;
line-height: 26px;
font-weight: normal;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
margin: 0;
}
.sf-menu li li a:hover, .sf-menu li li a:active, .sf-menu li li a.current {
background: #910b24;
text-decoration: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
padding: 0 5px;
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
outline: 0;
}
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px;
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em;
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('uploads/BizBuzz/images/arrows-ffffff.png') no-repeat -10px -100px;
}
a > .sf-sub-indicator {
top: .8em;
background-position: 0 -100px;
}
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px;
}
.sf-menu ul .sf-sub-indicator {
background-position: -10px 0;
}
.sf-menu ul a > .sf-sub-indicator {
background-position: 0 0;
}
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0;
}
.sf-shadow ul {
background: url('uploads/BizBuzz/images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
/* END OF NAVIGATION */
/* MODULES, ADD ONS */
/* News Module */
.newsCycle h2 a {
color: #ebebeb;
text-decoration: none;
line-height: 1.8em;
border-bottom: 2px groove #6a6a6a;
display: block;
}
/* News Meta Icons */
.postDate {
padding: 3px 8px 3px 20px;
background: url(/cms10star/uploads/BizBuzz/date.png) no-repeat 0 2px;
margin-top: 5px;
font-weight: bold;
float: left;
}
.postAuthor {
padding: 3px 8px 3px 20px;
background: url(/cms10star/uploads/BizBuzz/user.png) no-repeat 0 2px;
margin-top: 5px;
float: left;
}
.postCategory {
padding: 3px 8px 3px 20px;
background: url(/cms10star/uploads/BizBuzz/folder.png) no-repeat 0 2px;
margin-top: 5px;
float: left;
}
/* News Content */
.postSummary {
margin: 10px 0 10px 0;
height: 120px;
overflow: hidden;
}
.newsControl a {
position: relative;
z-index: 99;
cursor: pointer;
}
.newsControl a.activeSlide {
font-weight: bold;
}
.infoBlockWrapper .newsControl {
position: absolute;
left: 48%;
bottom: 15px;
}
.newsControl a {
display: block;
width: 10px;
height: 10px;
background: url('uploads/BizBuzz/images/bullets.png') no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.newsControl a.activeSlide {
background-position: -10px 0;
}
h3.newsSummarytitle a {
display: block;
border-bottom: 1px solid #6a6a6a;
text-shadow: none;
text-decoration: none;
line-height: 2.2em;
color: #6a6a6a;
}
/* Buttons */
.button a:link, .button a:visited {
background: #222 url('uploads/BizBuzz/images/overlay.png') repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
.button a:hover {
background-color: #111;
color: #fff;
}
.button a:active {
top: 1px;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited, .medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.super.button, .super.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
.grey.button a:link, .grey.button a:visited {
background-color: #3f3f3f;
}
.grey.button a:hover {
background-color: #cecece;
}
/* News list Navigation in Footer */
.list-news li a:link, .list-news li a:visited {
display: block;
text-decoration: none;
color: #ebebeb;
height:30px;
line-height: 30px;
border-bottom: 1px groove #ba0b2c;
overflow:hidden;
}
.list-news li a:hover, .list-news li a:active {
color: #fff;
}
/* jquery scroll to top plugin */
#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 10px;
right: 10px;
overflow: hidden;
width: 32px;
height: 32px;
border: none;
text-indent: -999px;
background: url('uploads/BizBuzz/images/up.png') no-repeat left top;
}
#toTopHover {
background: url('uploads/BizBuzz/images/up.png') no-repeat left -51px;
width: 32px;
height: 32px;
display: block;
overflow: hidden;
float: left;
}
#toTop:active, #toTop:focus {
outline: none;
}
/* Social Networks List in Footer */
ul.list-social li {
float: left;
padding: 4px;
}
