Menü üzerine geldiğimizde rengin değişmesi olayı

Merhaba, menün üzerine geldiğimizde yazı rengini değiştirmeyi başardım fakat alt alana geçtiğimde menü başlık rengi eski rengine dönüşüyor.

Net açıklamak gerekirse.
ANA BAŞLIK var elimizde 1 adet bunun normal görüntüsü koyumavi üzerine geldiğimizde beyaz oluyor ama anabaşlık 1 menü açıyor bu menünün altına gidince renkgeri koyu mavi oluyor mause alt menüdeykende aynı renkde yani beyazda kalmasını nasıl sağlayabilirim? Ücretli ücretsiz birinin çıkıp ben yaparım demesi yeterli 2 gündür beceremedim olayı. Allataki resimde daha net açıkladım durumu.

Submenu açıldığında submenu'ye geçtiğinizde rengin aynı kalmasını istiyorsanız ( anladığım bu ) li a:hover yüksek ihtimal sizde onu li:hover a yapmanız gerekiyor. Kodları görmeden pek birşey diyemiceğim malesef.

.header {
  height: 80px;
  border-bottom: 1px solid #da2f2f;
  background: #fff;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 12; }
  .header .logo {
    position: relative;
    top: 20px; }
  .header ul.menu {
    float: right;
    border-right: 1px solid #f9f9fa; }
    .header ul.menu > li {
      float: left;
      border-left: 1px solid #f9f9fa; }
      .header ul.menu > li a {
		display: block;
		line-height: 80px;
		font-weight: 700;
		-webkit-border-radius: 3px 3px 0 0;
		-moz-border-radius: 3px 3px 0 0;
		-ms-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
		font-size: 16px;
		color: #626a88;
		padding: 0 20px;
		-webkit-transition: all 0.3s ease-in-out 0s;
		-moz-transition: all 0.3s ease-in-out 0s;
		-ms-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s; }
        .header ul.menu > li a:hover {
        background-color: #da2f2f;
        color: #fff; }				
        .header ul.menu > li a .fa {
          margin-left: 5px; }
      .header ul.menu > li.active a {
          background-color: #3181c7;
          background: -webkit-gradient(linear, left top, left bottom, from(#3894d2), to(#2765ac));
          background: -moz-linear-gradient(top, #3894d2, #2765ac);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3894d2', endColorstr='#2765ac');
          -webkit-box-shadow: 0 0 49px rgba(0, 0, 0, 0.26) inset;
          -moz-box-shadow: 0 0 49px rgba(0, 0, 0, 0.26) inset;
          box-shadow: 0 0 49px rgba(0, 0, 0, 0.26) inset; }

header kısmındaki menü kodlarım bunlar.

Konu güncel hale bir çözüm yolu bulamadım. Fikir verecek yazıya dahi ihtiyacım var.

Durum güncelliğini sürdürmektedir. Fikri dahi olan yokmu?

HTML kısmını atabilirsen daha iyi yardımcı olabilirim. Şimdi font rengini değiştirmek için

ul.menu > li > a:hover

şeklinde kullandım sanırım alt menüde a tagının değilde li tagının içinde olduğu için alt menüye geçtiğinde a tagının hover özelliği gidiyor. Kodu

ul.menu > li:hover > a {color }

şeklinde güncellersen işine yarayacaktır.

dostum css ile beraber html kodlarınıda yazarsan daha iyi olur.hatta codepen.io'da yazarsan büyük bi kolaylık sağlamış olursun.

Menünün adı ul.menu olsun. Yapman gereken, CSS'te

Dış menü için

ul.menu > li > a { color: #üzerine gelmediğindeki renk; }
ul.menu > li:hover > a { color: #üzerine geldiğindeki renk; }

İç menü için

ul.menu > li ul > li > a { color: #üzerine gelmediğindeki renk; }
ul.menu > li ul > li:hover > a { color: #üzerine geldiğindeki renk; }