Title: change navigation dropdown colors
Last modified: August 19, 2016

---

# change navigation dropdown colors

 *  [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/)
 * Hi everyone,
 * I am putting the finishing touches on a wordpress site and blog (www.hydroproxy.
   org) (as far as far as design is concerned). Im currently utilizing the mystique
   2.4.1 theme on wordpress 3.1.1. I have been tweaking the navigation menu colors
   via a “user css” customization. I have looked at several tips on the forum and
   used them (thank you very very much everyone that helped).
 * I am trying to achieve a uniform nav bar but my problem is that once i click 
   on a link that contains a dropdown menu. IE, the H2O2 link. The page loads and
   when you hover over the link and navigate the drop down menu it is black. If 
   possible, I would like to have the current link look like the rest of the links
   and dropdown menus when you hover over them.
 * Thank you so much if you are able to help me. My CSS experience is extremely 
   limited and much thanks if you can help. If you would like me to provide the 
   custom nav user css output to see how I achieved the current look of the nav 
   menu, let me know.

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

 *  Thread Starter [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041901)
 * Anybody have any suggestions? This is what the custom user css looks like.
 * /* Custom colors for the navigation bar */
 * ul.navigation li.active a span.pointer, ul.navigation li.current_page_item a 
   span.pointer, ul.navigation li.current_page_parent a span.pointer, ul.navigation
   li.current_page_ancestor a span.pointer { display: none; }
 * ul.navigation{background-position:left -464px;background-color:#ddd;}
    ul.navigation
   li{background-position:right bottom;} ul.navigation li a{text-shadow:none;color:#
   397fbf;}
 * ul.navigation li.active a, ul.navigation li.current_page_item a, ul.navigation
   li.current_page_parent a, ul.navigation li.current_page_ancestor a { background:#
   397fbf; color:#fff; text-shadow:rgba(0,0,0,0.5) 1px 1px 1px; }
 * ul.navigation li.active a,
    ul.navigation li.current_page_item a,ul.navigation
   li.current_page_parent a,ul.navigation li.current_page_ancestor a, ul.navigation
   li.current-cat a,ul.navigation li.current-cat-parent a,ul.navigation li.current-
   cat-ancestor a{background-position:left -164px;color:#fff;}
 * ul.navigation li a:hover,ul.navigation li:hover a,ul.navigation li a.fadeThis
   span.hover{background-color:rgba (138;43;226) ;} /*(255,255,255,0.1) */
    ul.navigation
   li:hover li a{background-color:transparent;} ul.navigation li li a:hover,ul.navigation
   li li a.fadeThis span.hover{background-color:#397fbf !important;}
 * ul.navigation li.active a span.pointer,
    ul.navigation li.current_page_item a
   span.pointer,ul.navigation li.current_page_parent a span.pointer,ul.navigation
   li.current_page_ancestor a
 * span.pointer,
    ul.navigation li.current-cat a span.pointer,ul.navigation li.current-
   cat-parent a span.pointer,ul.navigation li.current-cat-ancestor a span.pointer{
   background-position:center bottom;}
 * ul.navigation ul{background-color:rgba(0,0,0,0.66);border-color:#ddd;}
 * ul.navigation li.active a:hover, ul#navigation li.active:hover a { background-
   color:#397fbf;}
 * ul.navigation li.active ul,
    ul.navigation li.current_page_item ul,ul.navigation
   li.current_page_parent ul,ul.navigation li.current_page_ancestor ul, ul.navigation
   li.current-cat ul,ul.navigation li.current-cat-parent ul,ul.navigation li.current-
   cat-ancestor ul {background-color:#ddd;border-color:#ddd;}
 * ul.navigation ul ul{border-top:1px solid rgba(255,255,255,0.5) ;}
 * ul.navigation{ background:#ddd url(images/nav.png) repeat-x left top; }
 *  Thread Starter [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041919)
 * Has anybody ran into this problem? Well, not a problem but a configuration change.
 * Its been about a week since I posted this question. Thanks for any insight.
 *  [Dchidell](https://wordpress.org/support/users/dchidell/)
 * (@dchidell)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041920)
 * Can you post the link to a site?
 *  Thread Starter [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041921)
 * Hi,
    certainly, [http://www.hydroproxy.org](http://www.hydroproxy.org). Let me
   know if I can provide any more information.
 *  [Dchidell](https://wordpress.org/support/users/dchidell/)
 * (@dchidell)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041922)
 * styles/mystique/style.css
 *     ```
       ul.navigation li.active a:hover, ul.navigation li.active:hover a {
       background-color: ENTER YOUR COLOR HERE;
       ```
   
 * Let me know if it works.
 *  Thread Starter [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041923)
 * Hey, Im close and its amazing how much better it looks. Thanks for helping me
   out.
 * I want to try and have the transparent black background that can be seen when
   you hover over any other dropdown list other then the current link that was clicked.
   I think the code that is currently used for the transparency effect/backgrounds
   is…
 * ul.navigation li a:hover,ul.navigation li:hover a,ul.navigation li a.fadeThis
   span.hover{background-color:rgba (138;43;226) ;} /*(255,255,255,0.1) */
    ul.navigation
   li:hover li a{background-color:transparent;} ul.navigation li li a:hover,ul.navigation
   li li a.fadeThis span.hover{background-color:#397fbf !important;}
 * Im only basing that code output because it lists “transparent” in the code.
 * One thing that I think is minor, is that once I click on a dropdown link, the
   column and dropdown menu that the dropdown link was under goes solid black.
 *  Thread Starter [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041926)
 * Thanks Dchidell.
 * Anyone have any other suggestions for achieving the uniform look?
 *  Thread Starter [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * (@hydroproxy)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041929)
 * anybody have any suggestions? I’ve been trying some changes but I am not achieving
   the uniform look and my CSS is limited. Any help is much appreciated,
 * Thanks,

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

The topic ‘change navigation dropdown colors’ is closed to new replies.

 * 8 replies
 * 2 participants
 * Last reply from: [hydroproxy](https://wordpress.org/support/users/hydroproxy/)
 * Last activity: [15 years, 1 month ago](https://wordpress.org/support/topic/change-navigation-dropdown-colors/#post-2041929)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics