(SOLVED)How to fix top horizontal menu "gap" bug?

[Prince J]

Well my website is based on temporary theme, this bug is driving me crazyy....

How to move the categories up and attached on "home"?





My horizontal menu module css as below:


/*** ESSENTIAL STYLES ***/
.sf-contener {
float:left;
clear: both;
margin-bottom: 10px;
margin-top:10px;
height: 55px;
padding-top:10px;
padding-bottom:10px;
background-image: url(../img/sprite.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}

.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;

}
.sf-menu {
float: left;
width: 970px;
line-height: 55px;


}
.sf-menu ul {
position: relative;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
line-height: 25px;

}
.sf-menu ul li {
width: 350px;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
margin-left:10px;
z-index: 99;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 4.7em; /* match top ul list item height */
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: 10em; /* match ul width */
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: 10em; /* match ul width */
top: 0;
}

/*** DEMO SKIN ***/
.sf-menu {
float: left;

}
.sf-menu a {
border: 0;
/* border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF; */
padding-left:20px;
padding-right:20px;
text-decoration:none;

}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#FFFFFF;
text-transform:uppercase;
font-size:1.2em;
font-weight:bold;
}
.sf-menu li li {
background-color: #333;
border-bottom: 1px dotted #666;
padding-right:10em;
white-space:nowrap;


}
.sf-menu li li li {
background-color: #333;/*#9AAEDB;*/
}
.sf-menu a:hover, .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce , .sf-menu li.sfHoverForce a {
color:#3366ff;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background:inherit;

}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
background-color: #333;
outline: 0;

}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
bottom: 0px; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../img/arrows-ffffff.png') no-repeat -10px -35px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: 25px;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
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; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.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; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
/*.sf-shadow ul {
background: url('../img/shadow.png') no-repeat bottom right;
padding: 0 0 -12px 0;

}*/
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
li.sf-search {
white-space:nowrap;
margin-right:20px;

}
/*** ie7 fix to hide image***/
li.sf-search:hover {
background-image: none;
}
li.sf-search input {
vertical-align:middle;
height:40px;
border:none 0;
line-height:40px;
background-color:transparent;
}
li.sf-search input.textfield {
background-image: url(../img/sprite.png);
width:230px;
background-repeat: no-repeat;
margin-right:5px;
padding-left:5px;
color:#000;
font-size:16px;
font-weight:bold;
background-position: 0px -77px;
}

[Prince J]

Anyone? Who can help me to solve this problem? I will appreciate.

[Prince J]

Please help me T.T

[ChrisLNZ]

either create a featured product or look for the place where the phrase 'no featured product' is being generated and remove or move the div that displays it

[Prince J]

It's not working, even if I remove featured product block, it is still a gap there.

By the way, thanks.

[smenster]

change:

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
   left: 0;
   top: 4.7em;
   z-index: 99;
}

to:

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
   left: 0;
   z-index: 99;
}

in superfish-modified.css

[Prince J]

Thanks smenster!!!

By they way, I change additional parts based on your method.

}
.sf-menu ul {
position: relative;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
line-height: 25px;

to

}
.sf-menu ul {
position: relative;
width: 10em; /* left offset of submenus need to match (see below) */
line-height: 25px;

Now the problem is solved!!!!!!!!!

Thanks anyway!!!!!

Your theme is really bloody wicked.
Hope that you can design more themes in the future!!