Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] color on hover


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Sep 22, 2010, 02:45 PM
cway
 
148 posts · Jul 2009
[SOLVED] color on hover

I'm trying to get a 2px solid bar to appear below menu items on mouse over.
Below is my coding, but it's not working. Can anybody help?
Here's what I'm trying to duplicate: http://www.orchidorganics.com/mm5/merchant.mvc
Thanks!
Cway

Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	margin-top:0px;
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	height: 28px;
	background: URL(http://www.orchidorganics.com/mm5/graphics/nav_bar_gradient_background.gif);
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background: transparent !important;
	font-align: bottom;
	color: #666666 !important;
	margin-left: 16px;
	margin-right: 16px;
	margin-top: 2px;
	margin-bottom: 0px
}
ul.rMenu li a:hover {
    border-bottom: 2px #a3238e solid;
}
/* ================================================ */

Last edited by cway; Sep 22, 2010 at 02:46 PM. Reason: Forgot URL
  #2  
Old Sep 22, 2010, 05:54 PM
lmilesw's Avatar
lmilesw
 
9,400 posts · Jul 2009
Central New York State USA
Try rearranging the border shorthand as such. The order is supposed to be width, style, color.
HTML Code:
ul.rMenu li a:hover {
    border-bottom: 2px solid #a3238e;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Sep 23, 2010, 03:54 AM
juggledad's Avatar
juggledad
 
20,010 posts · Mar 2009
OSX 10.6.8/10.7.3 WP 2.8.x/2.9.x/3.x Atahualpa 3.5.x/3.7.x Safari 5.x Firefox 11 XP
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
  #4  
Old Sep 23, 2010, 09:30 AM
lmilesw's Avatar
lmilesw
 
9,400 posts · Jul 2009
Central New York State USA
Those kinds of rules are why w3school.com can be so helpful.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Sep 23, 2010, 10:09 AM
cway
 
148 posts · Jul 2009
Thanks for the quick help, guys!
I've made the changes, but it still isn't working.
New code:

Code:
ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li {
	background: transparent !important;
	font-align: bottom;
	color: #666666 !important;
	margin-left: 16px;
	margin-right: 16px;
	margin-top: 2px;
	margin-bottom: 0px
}
ul.rMenu li a:hover {
    border-bottom: 2px solid #a3238e;
}
Would the margins be causing a problem?
Any other ideas?
Thanks!
Cway
  #6  
Old Sep 23, 2010, 10:22 AM
lmilesw's Avatar
lmilesw
 
9,400 posts · Jul 2009
Central New York State USA
Have you tried

HTML Code:
border-bottom: 2px solid #a3238e !important;
You also may have to adjust the bottom padding as it looks like the border needs to be closer to the text.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Why do children items have parents hover color. FlippinSweet Page & Category Menu Bars 8 Jun 28, 2010 12:04 PM
[SOLVED] Hover color not working properly in IE BradBrown Page & Category Menu Bars 5 Sep 23, 2009 09:10 PM
How to make Current page color different than Hover color? 25jai Page & Category Menu Bars 7 Jul 17, 2009 05:06 AM
Table changes color/highlights with mouse hover. How do I stop it? InviteStory Atahualpa 3 Wordpress theme 2 Apr 24, 2009 12:05 PM
Change hover color in body of post HalfWayThere Atahualpa 3 Wordpress theme 6 Feb 18, 2009 02:56 PM


All times are GMT -6. The time now is 06:20 AM.


Powered by vBulletin® Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.