Submenu without hover

HTML & CSS
1

Hi,

I have a superfish vertical menu with transparent png parent items. I’d like to keep that temporary opaqueness on hover/shHover state for these elements but don’t want it to apply to my sub-menu items which are already opaque jpgs and fine without hover. Can someone tell me how to go about achieving this?

2 things are happening to the sub-menus:
1- either the opaque color that s applied to the transparent parents applies to them as well OR;
2- They inherit that transparency on hover.

Neither case is good for me, I would just like them to remain as they are.

I’m sorry I can post a link here, I’m doing this offline.

Thanks
R

2

Hi, You will need to post some code or a link to the page so we can see what you have.

From what you are saying though it sounds like your sub-menu items are inheriting the opacity along with their opaque jpgs.

Have you tried to reset the sub list items yet?

Here is an example of the sub-list anchor text color being reset on li:hover

If you view the page source you will see this in the css:

#nav [B]li:hover a [/B]{color:#0F0}/*lime*/

#nav [B]li:hover li a[/B] { color:#000}/*reset li:hover a on sub li*/

#nav [B]li li a:hover[/B] {color:#0FF}/*cyan*/

You should be able to reset your opacity in the same manner

3

Hi Rayzur,
Thanks for answering so fast.

this is a superfish vertical
parents are transparent pngs
(there is an image under the menu but not part of it- its part of a surrounding div - no issue there)

the subs menu (1 level only) are opaque png images (as opposed to color code).
(I made an earlier mistake saying they were jpg)

these are the ones I would like to remain as they are:
Arrows/shadows are disabled
here is the css (i’m sure a fair bit could be deleted but I’m unsure as to what it could be),


.menu.sf-menu.sf-vertical {
	list-style:	none;
	display: block;
	width:	223px;
	margin:	2px 0px 0px 0px;
	padding: 0px 0px 0px 0px;}
.menu.sf-menu {
	margin:	0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;}
.menu.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			223px;} 

/* parent images here below */

ul.menu.sf-menu.sf-vertical li {
	width: 223px;
	height:	40px;
	line-height: 40px;
	display:block;
	position:relative;
	font-family: Palatino, Georgia, Times New Roman;	
	font-weight: bold;
	font-size:	11px;
	color:	#000;
	text-indent:28px;
	margin:  0px, 0px, 0px, 0px;
	padding:0px, 0px, 0px, 0px;
	background-repeat:  no-repeat;
	background-position:  0 0;}
ul.menu.sf-menu.sf-vertical li a {background-image: url('../../../ftimages/extensions/sfm/ftp1.png');}
ul.menu.sf-menu.sf-vertical li a:visited {background-image: url('../../../ftimages/extensions/sfm/ftp2.png');}
ul.menu.sf-menu.sf-vertical li a:hover {background-image: url('../../../ftimages/extensions/sfm/ftp3.png');}
ul.menu.sf-menu.sf-vertical li a:active {background-image: url('../../../ftimages/extensions/sfm/ftp4.png');}

/* parent images here above */

.sf-menu li:hover {visibility: visible;}  
.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: 223px;
				top: 0px;  
				z-index: 99;}
				 /* - visibility: visible;} - */
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {top: -999em;
	left:			223px; 
	top:			0px;}
.sf-vertical, 
.sf-vertical li {width:	223px;}
.sf-vertical li:hover ul, 
.sf-vertical li.sfHover ul {	left: 0px; top:	40px;} 	

/* sub-menu images here below */

ul.menu.sf-menu.sf-vertical li ul li  
{	width:					193px;
	height:					32px;
	display:				block;
	text-indent:			20px;
	font-family: 			Palatino, Georgia, Times New Roman;	
	font-weight:			bold;
	font-size:				10px;
	color:					#fff;
	line-height:			32px;	
	margin:  	 		 	0px, 0px, 0px,0px;
	padding:		  		0px, 0px, 0px,0px;
	background-repeat:    	no-repeat;}
ul.menu.sf-menu.sf-vertical li ul li a {	background-image: url('../../../ftimages/extensions/sfm/ftc1.png');}
ul.menu.sf-menu.sf-vertical li ul li a:visited {	background-image: url('../../../ftimages/extensions/sfm/ftc2.png');}
ul.menu.sf-menu.sf-vertical li ul li a:hover { background-image: url('../../../ftimages/extensions/sfm/ftc3.png');} 
ul.menu.sf-menu .sf-vertical li ul li a:active {background-image: url('../../../ftimages/extensions/sfm/ftc4.png');}


/* sub-menu images here above */

ul.menu.sf-menu li li a  #current { 
	font-style:	italic;
	color:#fff;
	text-decoration: underline;}

.sf-menu {float: left; margin-bottom:	0px;}
.sf-menu a {
	border-left: 0px solid #fff;
	padding: 0px;
	text-decoration:none;} /* -border-top:	0px solid #CFDEFF; - */
.sf-menu a, 
.sf-menu a:visited  {color: #13a;}

ul.menu.sf-menu.sf-vertical.parent  li:hover { background:#e4d2bf;}
/* ul.menu.sf-menu.sf-vertical  li:.sfHoverv    
.sf-menu a:hover,  
.sf-menu a:hover
.sf-menu a:focus, 
.sf-menu a:active    outline:none;*/

/* 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: 0px 0px; }   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; }
4

Ok I will give it a shot here but I am unable to test it without the html and images.

When you hover over the parent list items it is basically saying “apply these anchor styles to ALL anchors in the UL”

With the css you just posted, these sub li a styles are not being applied until you actually hover on them. While that sublist is open and your cursor is still on the parent item it is displaying the 1st level rules to all anchors.

Try changing this:

ul.menu.sf-menu.sf-vertical [COLOR=Red][B]li ul li [/B][/COLOR]a {    background-image: url('../../../ftimages/extensions/sfm/ftc1.png');}
ul.menu.sf-menu.sf-vertical[COLOR=Red] [B]li ul li[/B][/COLOR] a:visited {    background-image: url('../../../ftimages/extensions/sfm/ftc2.png');}
ul.menu.sf-menu.sf-vertical [COLOR=Red][B]li ul li [/B][/COLOR]a:hover { background-image: url('../../../ftimages/extensions/sfm/ftc3.png');} 
ul.menu.sf-menu.sf-vertical [COLOR=Red][B]li ul li[/B][/COLOR] a:active {background-image: url('../../../ftimages/extensions/sfm/ftc4.png');}

To this:

ul.menu.sf-menu.sf-vertical [COLOR=Blue][B]li:hover li[/B][/COLOR] a {    background-image: url('../../../ftimages/extensions/sfm/ftc1.png');}
ul.menu.sf-menu.sf-vertical [B][COLOR=Blue]li:hover li[/COLOR] [/B]a:visited {    background-image: url('../../../ftimages/extensions/sfm/ftc2.png');}
ul.menu.sf-menu.sf-vertical [COLOR=Blue][B]li:hover li[/B][/COLOR] a:hover { background-image: url('../../../ftimages/extensions/sfm/ftc3.png');} 
ul.menu.sf-menu.sf-vertical [COLOR=Blue][B]li:hover li[/B][/COLOR] a:active {background-image: url('../../../ftimages/extensions/sfm/ftc4.png');}

(i’m sure a fair bit could be deleted but I’m unsure as to what it could be),
As far as the anchor BG’s, it looks like the pseudo states of the sub list are the only ones that are different.

You could probably eliminate this:

ul.menu.sf-menu.sf-vertical [B][COLOR=Blue]li:hover li [/COLOR][/B]a {    background-image: url('../[B]ftc1.png'[/B]);}

Since it is the same as this parent list a:

ul.menu.sf-menu.sf-vertical[B] li a[/B] {background-image: url('../[B]ftp1.png'[/B]);}
5

Wow, thanks Rayzur.

Up until I pasted your code in I was having that problem.
Its now gone.
No color, no transparency.
The subs stay as they should.

Thanks a great deal.:smiley:

R

6

Glad it worked out :wink:

I made an edit to my last post about something you may be able to eliminate.
There may be other rules too but I will not suggest removing anything else without seeing the page.