selecionar objeto pelo css (classe + id)

Oi Roger, tudo certo?

Basta na frente desse seletor voce colocar o seletor do drop1.

Se for um ID, só mandar um #drop1 na frente.

Espero ter ajudado,

Abcs!

@Natan, Não estou conseguindo fazer funcionar... vou mandar o código completo pra vc ver se consegue me ajudar.

Drop 1 - dentro de uma nav bar

    <li class="dropdown navbar-nav-li-a" id="menuSobreNos">
                                <a class="nl-link margin-top-10px nl-link-menu" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="aboutUsMenuDesktop"
                                ng-click="controller.clickAboutUs()">Sobre Nós <span class="caret"></span></a>

                                <ul class="dropdown-menu dropdown-background-color" role="menu" aria-labelledby="aboutUsMenuDesktop">
                                    <li role="presentation">
                                        <a ui-sref="website.history" style="padding: 0">
                                            <div class="navbar-login text-center menu-principal-font selected-menu-item">
                                                <span class="text-center">Nossa História</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li role="presentation">
                                        <a ui-sref="website.ourteam" style="padding: 0">
                                            <div class="navbar-login text-center menu-principal-font selected-menu-item">
                                                <span class="text-center">Nosso Time</span>
                                            </div>
                                        </a>
                                    </li>                                                                     
                                </ul>
                            </li>

Drop 2 - dentro da mesma nav bar

                    <li class="dropdown ">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="aboutUsMenuCel">Sobre Nós <span class="caret"></span></a>            

                        <ul class="dropdown-menu" role="menu" aria-labelledby="aboutUsMenuCel">
                            <li role="presentation" ng-click="controller.clickNavBarCel()"><a role="menuitem" tabindex="-1" ui-sref="website.history">Nossa História</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation" ng-click="controller.clickNavBarCel()"><a role="menuitem" tabindex="-1" ui-sref="website.ourteam">Nosso Time</a></li>
                            <li role="presentation" class="divider"></li>
                        </ul>
                    </li>

O que eu quero fazer é que o drop1 ao passar o mouse por cima já apareça as opções "Nossa História" e "Nosso Time". O drop2 só deve aparecer quando o usuário clicar nele.

Meu CSS antes de postar a dúvida aqui:

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
    opacity: 0;
    border-radius: 15px 15px 15px 15px;
    -moz-transition:    all 1000ms ease-in-out;
    -webkit-transition: all 1000ms ease-in-out;
    -o-transition:      all 1000ms ease-in-out;
    -ms-transition:     all 1000ms ease-in-out;
    transition:         all 1000ms ease-in-out;    
}

 .dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

Meu CSS após a sua resposta

#aboutUsMenuDesktop .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
    opacity: 0;
    border-radius: 15px 15px 15px 15px;
    -moz-transition:    all 1000ms ease-in-out;
    -webkit-transition: all 1000ms ease-in-out;
    -o-transition:      all 1000ms ease-in-out;
    -ms-transition:     all 1000ms ease-in-out;
    transition:         all 1000ms ease-in-out;    
}

#aboutUsMenuDesktop .dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

#menuSobreNos .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

Mas depois disso o drop1 parou de mostrar as opções no hover.

Consegue me ajudar? Estou iniciando no "mundo css" e tenho várias dúvidas ainda.

Obrigado.

Oi Roger,

Vou dar uma olhada essa semana, mas teoricamente é só colocar o ID no começo da sua regra.

Fiz um exemplo aqui: http://jsbin.com/lebuhoceka/edit?html,css,output

Repare que o fundo vermelho só pega onde deveria, no elemento com o ID drop1.

Abcs!

edit:

outra coisa tambem, no seu codigo HTML nao tem nenhum elemento com as classes (sub-menu) que voce usa no CSS, da uma olhada nisso

Obrigado @Natan, o problema era o sub-menu mesmo. :)