Superfish CSS Problem

[lucaswynne]

My site: http://themeforward.com/demo2/templates/

I’m having a problem getting rid of the margin on the right of the dropdown arrow with superfish menus. Any help?

/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * {

margin:			0;

padding:		0;

list-style:		none;

}

.sf-menu {

line-height:	1.0;

}

.sf-menu ul {

position:		absolute;

top:			-999em;

width:			10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width:			100%;

}

.sf-menu li:hover {

visibility:		inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float:			left;

position:		relative;

}

.sf-menu a {

display:		block;

position:		relative;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left:			0;

top:			2.5em; /* 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;

margin-bottom:	1em;

z-index: 900

}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/

color:			#FFF;

padding: 		.75em 0;

text-decoration:none

}

.sf-menu li {

margin-right:35px;

background:#1a1a1a;

z-index: 900

}

.sf-menu li li {

z-index: 900;

background:#FAFAFA

}

.sf-menu li li li {

background:		#FAFAFA;

z-index: 900

}

.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

outline:		0;

color:		#000

}



.sf-menu .current-post-ancestor a, .sf-menu .current-menu parent a, .sf-menu .current-page-ancestor a, .sf-menf .current-category-ancestor a, .sf-menu .active_category a, .sf-menu .current-menu-item a { color:#1a1a1a }



ul .sub-menu { }

ul li .sub-menu a { color:#000!important }

ul li .sub-menu a:hover { color:#FFF!important; background:#000!important }





/*** 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;

top:			1.05em; /* IE6 only */

width:			10px;

height:			10px;

text-indent: 	-999em;

overflow:		hidden;

background:		url('img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */

top:			.8em;

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*/

}

[TheDoc]

I think this is what you’re talking about, but I’m not sure:

.sf-menu li {

margin-right: 35px; /* change this value */

background: #1A1A1A;

z-index: 900;

}

[lucaswynne]

No, I guess I’m technically talking padding. See how the text in the top level of the menu has no padding but the arrow does? I’m trying to get rid of the padding on the right. Just having a problem locating where this is coming from.

[TheDoc]

The arrow is part of the background image I believe, so there isn’t technically padding ‘around the arrow’. But this is the padding that is showing the arrow:

.sf-menu a.sf-with-ul {

padding-right: 2.25em; /* if you remove this, you won't see the arrow anymore. You'll need to fiddle with the numbers */

min-width: 1px;

}

[lucaswynne]

Thanks, that took care of that.

I have another question and I don’t want to open another thread for it…

Checkout my menu. Hover over Features > Shortcodes > Typography. Notice how when you put your mouse over typography the background of Shortcodes turns to the darker red? How do I get the background to turn to the darker gray (#EEE) instead while on the third level of the menu without changing the parent menu link colors (Home, Templates, Features, Portfolio, Blog)?

Here is the part of my CSS creating this:

.sf-menu {

float:			left;

z-index: 900

}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/

color:			#FFF;

padding: 		10px;

text-decoration:none

}

.sf-menu li {

margin-right:35px;

z-index: 900

}

.sf-menu li li {

z-index: 900;

background:#FAFAFA

}

.sf-menu li li li {

background:		#FAFAFA;

z-index: 900

}

.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {

outline:		0;

background:	#AF1D21

}





.sf-menu .current-post-ancestor a, .sf-menu .current-menu parent a, .sf-menu .current-page-ancestor a, .sf-menf .current-category-ancestor a, .sf-menu .active_category a, .sf-menu .current-menu-item a { color:#1a1a1a }



ul .sub-menu { }

ul li .sub-menu a { color:#262626!important }

ul li .sub-menu a:hover { background:#EEE!important }

[Author]

Posts