Solved

Css Dropdown Menus

Posted on 2014-07-22
4
255 Views
Last Modified: 2014-07-22
I have a wordpress website with a dropdown menu.  I'm using CSS to style the background on Hover.  However, Menu choices that do not have a dropdown menu, I don't want there to be any background on hover.  Also, my dropdown menu is inheriting attributes that I don't want there.  If you go here: http://spokeinsurance.com/spoke/ and go toi the menu it should make sense.  But for further info, go to ABOUT and then down to "who we are" and you will see the styling I don't want.  Then if you go to FAQ, there is a background on hover that I don't want there cause there is no dropdown menu.

Any help?
0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40212883
styles.css line 2449
Change
.top-menu li:hover

to
.top-menu .menu > li:hover:nth-child(n+3)
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 40212885
not sure what you mean.
on safari it looks ok.
the way I see  menus are as buttons and buttons when clicked will do something and buttons usually have a hover over and change to indicate you have got the right button.  is it just the  actual change you don't like?  
I think its slightly too big when you hover and would just go for the change in colour,
0
 
LVL 7

Author Closing Comment

by:rgranlund
ID: 40212925
Yep, never would have come up with that.  Thanks!
0
 
LVL 15

Expert Comment

by:eemit
ID: 40212972
You can also use class menu-item-has-children added by WordPress, e.g:
.top-menu li.menu-item-has-children:hover {
    box-shadow: 0 -3px 8px -5px black;
}

.top-menu li:hover {
    box-shadow: none;
}

Open in new window


Please note: If you have less than three sub-menu items posted solution will not work.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question