• 0
Sign in to follow this  
Followers 0

Submenu/Navigation

Question

Posted · Report post

I have made the nav bar on my site have hover images. However, the problem is that when I implement a submenu it carries the hover images down into the submenu. See an example here: http://www.screencast.com/t/Olqb1zWXt I would like the submenu to be transparent and have no images. Any ideas? This is the code I am using to create the hover:

#menu-main { margin:0 auto;
	width:975px;}
	.main_nav ul li {font-size: 18px;}
	
	.main_nav li a { color: #135A2E !important;}
	.main-nav li.current-page-ancestor a,
	.main-nav li.current_page_item a,
	.main-nav li.current-page-ancestor ul a,
	.main-nav li.current_page_item ul a.sf-menu li li { background-color: #EAE8E6; color: #135A2E;}
	li.menu-item-43 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;}
	li.menu-item-42 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;}
	li.menu-item-55 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-large.png'); background-repeat: no-repeat;}
	li.menu-item-44 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-small.png'); background-repeat: no-repeat;}
	li.menu-item-52 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-med.png'); background-repeat: no-repeat;}
	.main-nav li a:hover,
	.main-nav .current-menu-ancestor .current_page_item a:hover,
	.main-nav li.current-menu-ancestor ul a:hover { background-color: #EAE8E6; color: #FFFFFF !important; }
	li.menu-item a:hover {list-style-type:none;
	margin:0;
	padding:20;
	padding-top:15px;
	padding-bottom:30px;
	}

My site is currently on a development server on my desktop. I can try to upload it to a domain if you need to see something more than screen captures. Thx.

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

Something like adding a transparent background to the subnav element may work. Have you tried that?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That worked. Thanks! Now, how would I specify that I want the subnav hover font color to stay the same and not change to white like the main nav? Here is the code I have tried: [code] li.sub-menu a:hover { color: #135A2E !important;}[/code] [code] #sub-menu li a:hover { color: #135A2E !important;}[/code] I have also tried to do it by specifying each individual menu item #. Any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome! :) It's hard to determine exactly what you need to use since your site isn't live, but you could try to add the 'a' element in there (if you want them to use the same color): [code]li.sub-menu a, li.sub-menu a:hover { color: #135A2E !important;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, I finally have had time to sit down and try the above. Unfortunately it didn't work. I have uploaded my website to a sample domain at: [url="http://www.wengermarketinggroup.com/"]http://www.wengermarketinggroup.com/[/url]. The issue I am still having is that when I hover over the subnav area the link color is white. This was necessary in the main menu due to the green hover effect. But on the subnav it makes it so I can't see the text. Also, I would like to get rid of the gray box if possible. Another option I would be okay with if I can't do the other is changing the hover background of the subnav to be the same color of green as the hover effect. Here is my current code: [code]#nav_row { margin:0 auto; width:700px;} .main_nav ul li {font-size: 18px;} .main_nav li a { color: #135A2E !important;} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a.sf-menu li li { background-color: #EAE8E6; color: #135A2E;} li.menu-item-43 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;} li.menu-item-42 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;} li.menu-item-55 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-large.png'); background-repeat: no-repeat;} li.menu-item-44 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-small.png'); background-repeat: no-repeat;} li.menu-item-181 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-med.png'); background-repeat: no-repeat;} li.menu-item-67 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-68 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-69 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-70 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-71 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-174 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a:hover, .main-nav li.current-menu-ancestor ul a:hover { background-color: #EAE8E6; color: #FFFFFF !important; } li.menu-item a:hover {list-style-type:none; margin:0; padding:20; padding-top:15px; padding-bottom:30px; } li.sub-menu a:hover { color: #135A2E !important;} #brandnav.content-pad { padding-top: 1em; padding-bottom: 1em;} .content-pad { padding: 0px;} [/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Add this to your custom CSS and see if this does the trick. [code]ul.sf-menu li a:hover { color: purple !important; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Danny thanks for the response. Unfortunately that turned all of the links to purple, including the main nav and the dropdown item links on hover. So that still doesn't help me target just the dropdown item links on hover.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I decided to just go ahead and upload a green background image for the hover as a work around. But if anyone knows how I can still target just the dropdown links on hover I would love to have the knowledge. :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I have just tested the code below and that is working for me. [code].sub-menu li a:hover { color:pink; }[/code]

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  
Followers 0