Jump to content
Sign in to follow this  
rljmedia

Missing hover over target in css

Recommended Posts

rljmedia

Hello Gurus. I am trying to target and get and image to show on a hover over effect when the mouse goes over the menu. It is a triangle that will show on mouse hover and during when the menu is selected. My site: www.rljmedia.com

/* Hover over color */
	#brandnav ul#menu-main-menu li.menu-item a:hover {
	  color:#4B246C;
	  background-image:url('images/hover_triangle.png')no-repeat top center transparent;
	  background-color:#ffffff; !important;
	  }
	/* menu color states */
	.main_nav ul li.current_page_item a {
	 color:#F15E24;
	 background-color:transparent;
	}
	.main_nav ul li.current_page_item a:hover {
	 color:#F15E24;
	 background-image:url('images/hover_triangle.png')no-repeat top center transparent;
	 background:transparent;
	 background-color:transparent;
	 !important;
	}
	.main_nav ul li.current_page_item a:visited {
	  background-color:transparent;

Share this post


Link to post
Share on other sites
rljmedia
From some articles, I think a tag is need in the li to have and image show up above the nav menu li. Not sure if there is another way to get a triangle to pop up above the menu names.

Share this post


Link to post
Share on other sites
rljmedia
You Guys are the Best! you made me better, faster, stronger. Since no one chimed in helped me solve this problem made me focus and correct the code to have and image pop up over the have menu. The details are in me putting the full url first than the right positioning. [code]/* Hover over color */ #brandnav ul#menu-main-menu li.menu-item a:hover { color:#4B246C; background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 20px 2px; background-color:#ffffff; !important; } /* menu color states */ .main_nav ul li.current_page_item a { color:#F15E24; background-color:transparent; } .main_nav ul li.current_page_item a:hover { color:#F15E24; background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat -10px 10px transparent; background-color:transparent;!important; }[/code] Rock on Pagelines!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×