Title: Hover Effect for menu
Last modified: August 21, 2016

---

# Hover Effect for menu

 *  [blueturnaround](https://wordpress.org/support/users/blueturnaround/)
 * (@blueturnaround)
 * [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/)
 * Hi, first time wordpress user here. Glad I tried it!
 * I’m making this website: [http://www.csfinancialstrategy.com/](http://www.csfinancialstrategy.com/)
 * I’ve been able to figure out most of what I want done. However, I can’t find 
   any help to create hover effects for the menu.
 * I want each individual word / link in the menu to change color to white, with
   the background changing to a dark blue (same color as the logo) when the mouse
   is hovering over it.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [blueturnaround](https://wordpress.org/support/users/blueturnaround/)
 * (@blueturnaround)
 * [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/#post-4717389)
 * bump?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/#post-4717403)
 * Rather than bumping can you post more information of the issue?
    Why can’t you
   create the hover effects? What are you trying that isn’t working?
 *  Thread Starter [blueturnaround](https://wordpress.org/support/users/blueturnaround/)
 * (@blueturnaround)
 * [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/#post-4717407)
 * I can’t create the hover effect because I do not know how to do it, and there
   does not appear to be any feature built into the theme to do so.
 * Is there a feature to do that built into the theme?
 * If not, then I assume that I can write in code into the custom css plugin?
 * Where would I go to find / learn that code?
 * “I want each individual word / link (i.e. letters) in the menu to change color
   to white, with the background changing to a dark blue (same color as the logo)
   when the mouse is hovering over it.”
 *  [Kevin Sinfield](https://wordpress.org/support/users/kevsinfield/)
 * (@kevsinfield)
 * [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/#post-4717414)
 * Hi,
 * Try this.
 * /* ! Main-Menu */
    .main-navigation a:hover { background: #203e96; color: #ffffff;}
 * /* ! Sub-Menu */
    .main-navigation ul ul :hover > a { background: #203e96; color:#
   ffffff; }
 * You might need to change the background color.
 *  Thread Starter [blueturnaround](https://wordpress.org/support/users/blueturnaround/)
 * (@blueturnaround)
 * [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/#post-4717419)
 * Thanks! That works great.
 * Any sites I can learn about menu coding? It kind of makes sense, but I don’t 
   understand the “pronouns”… by which I mean /*! and those kinds of symbols.
 * Also, instead of the color change effect in the main menu (I like it just fine
   in the submenu), I’d like to add an underline effect for the main menu.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Hover Effect for menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/spun/2.0.2/screenshot.png)
 * Spun
 * [Support Threads](https://wordpress.org/support/theme/spun/)
 * [Active Topics](https://wordpress.org/support/theme/spun/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/spun/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/spun/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [blueturnaround](https://wordpress.org/support/users/blueturnaround/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/hover-effect-for-menu/#post-4717419)
 * Status: not resolved