menu continuar com a:hover

[528167 0]

Bom dia amigos! eu criei um menu que de inicio esta assim: IMAGEM 1

Quando passa p mouse ele fica assim: IMAGEM 2 até ai tudo bem.

Porem quando vou nas opções do menu o titulo do menu não aparece mais a cor laranja, assim: IMAGEM 3

eu queria que quando fosse na opções do menu o titulo do menu que é Area do Cliente continuasse laranja, tentei de tudo mais não deu certo. Não sei o que fiz de errado.

 

Se alguém me ajudar agradeço.

 

Códigos:

 

HTML:

<!-- Menu -->
 
            
           <nav id="access" class="access" role="navigation">
            
            <div id="menu" class="menu">
                 
                <ul id="tiny">
                 
                    <li><a href="index.html" class="active">Inicio</a></li>
 
                    <li><a href="index.html">Suporte<i class="fa fa-angle-down"></i></a>
                        <ul>
                            <li><a href="#">Abrir Chamado</a></li>
                            <li><a href="#">Pedido de Serviços</a></li>
                            <li><a href="#">Reclamação</a></li>
                            <li><a href="#">Contato</a></li>
                        </ul> 
                    </li>
                    <li><a href="index.html">Area do Cliente<i class="fa fa-angle-down"></i></a>
                        <ul>
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Registrar</a></li>
                            <li><a href="#">Mudar Senha</a></li>
                            <li><a href="#">Contato</a></li>
                    </li>
                     
                </ul>
                 
            </div>
             
        </nav><!-- end nav menu -->

CSS:

/*------------------*/
/*  MENU
/*------------------------------------------------------*/
 
#access .menu {
    list-style: none;
    font-weight: normal;
    position: relative;
    float: right;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin-top: 0px;
}
#access .menu select {
    border: 2px solid #eee;
    padding: 10px 10px 10px 10px;
    background-color: #f9f9f9;
    color: #333;
}
#access .menu ul {
    margin: 0px;
    list-style-type: none;
    position: relative;
    text-align: left;
    z-index: 1001;
    height: auto;
    margin: 9px 0px 9px 0px;
    float: right;
}
#access .menu ul li {
    position: relative;
    display: inline-block;
    padding: 0;
    z-index: 101;
    margin: 0px 4px 0px 0px;
    float: left;
    background: url(../images/menu-divider.html) no-repeat right 31px;
}
#access .menu ul li.last {
    background: none;
}
#access .menu ul li a {
    display: inline-block;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #3b3a39;
    margin: 0;
    padding: 13px 12px 12px 14px;
    text-align: center;
}
#access .menu ul li a i {
    margin-left: 4px;
     
}
 
 
#access .menu ul li a:hover {
    color: #fff;
    background-color: #ff8100;
    border-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
#access .menu ul li a.active {
    color: #fff;
    background-color: #ff8100;
    border-radius: 4px;
}
 
#access .menu ul li ul {
    position: absolute;
    left: 0;
    height: auto;
    display: none;
    visibility: hidden;
    width: 194px;
    padding: 0;
    margin-top: -1px;
    text-align: left;
    background: #ff8100;
    border-radius: 4px;
    border-top-left-radius: 0px;
}
#access .menu ul li ul li {
    display: list-item;
    float: none;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
}
#access .menu ul li ul li ul {
    top: 0;
}
#access .menu ul li ul li a {
    margin: 0;
    border: none;
    display: block;
    padding: 14px 17px 14px 17px;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: #fff;
    background: #ff8100;
    width: 159px;
    text-align: left;
    border-bottom: 1px solid #f6f6f6;
    border-radius: 4px;
    border-top-left-radius: 0px;
}
#access .menu ul li ul li a:hover,
#access .menu ul li ul li.active a,
#access .menu ul li ul li a.selected {
    background: #ffa841;
    border-bottom: 1px solid #f3f3f3;
    color: #fff;
    padding: 14px 17px 14px 17px;
    border-radius: 4px;
    border-top-left-radius: 0px;
}
 
#access .menu ul li ul li:last-child {
    border: none;
}
* html #access .menu {
    height: 1%;
}
 
.selectnav {display: none; width: 440px; margin-left: 20px;}

[carloshenrique1991 0]

Tente fazer assim no seu css

 

access:hover menu{

...

}