Al desplazar un elemento de la lista CSS, cambie los elementos principales CSS

Question

Tengo una lista simple de UL, al pasar el puntero sobre el elemento de lista More en el HTML siguiente, muestra su menú secundario y lo muestra.

Lo que tengo que hacer es cambiar el CSS del CSS real de More una vez que el menú secundario se muestra y se desplaza.

Así que si pasa el mouse sobre More aparece un menú secundario, luego desplace el cursor sobre ese menú secundario. En este punto, necesito cambiar el CSS del menú principal de este elemento secundario, que sería el menú que tiene More, ya que es texto.

Si sabes cómo hacerlo sin Javascript, me gustaría saber ... ¿Tal vez ni siquiera es posible sin JS?

<div id="nav-wrapper"> 
     <ul> 

      <li><a href="">Link</a></li> 

      <li><a href="">Link 5</a></li> 

      <li><a href="">More</a> 
       <ul> 
        <li><a href="">Sub Link 1</a></li> 
        <li><a href="">Sub Link 2</a></li> 
        <li><a href="">Sub Link 3</a></li> 
        <li><a href="">Sub Link 4</a></li> 
        <li><a href="">Sub Link 5</a></li> 
       </ul> 
      </li> 

     </ul> 
    </div> 

El CSS

<style type="text/css" media="screen"> 
#nav-wrapper ul { 
    position:relative; 
    width: 700px; 
    float: right; 
    margin: 0; 
    list-style-type: none; 
} 
#nav-wrapper ul li { 
    vertical-align: middle; 
    display: inline; 
    margin: 0; 
    color: black; 
    list-style-type: none; 
} 
#nav-wrapper ul li a { 
    text-decoration: none; 
    white-space: nowrap; 
    line-height: 45px; 
    font-size: 13px; 
    color: #666; 
    padding: 5px 15px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav-wrapper ul li a:hover { 
    color: #fff; 
    background-color: #4caef2; 
} 
#nav-wrapper ul li a:visited { 
    color: #666; 
} 

/* Hide Sub-menus */ 
#nav-wrapper ul ul{ 
    display: none; 
} 
/* SHOW Sub-menus on HOVER */ 
#nav-wrapper ul li:hover ul{ 
    display: block; 
    margin:-10px 0 0 0; 
    padding:0px 20px 20px 20px; 
    border-color:#fff; 
    border:1px; 
    border-style:solid; 
    background:#FFF; 
    position:absolute; 

    top:45px; 
    right: 320px; 
    width: 420px; 
} 

</style> 

Answer 1

Bueno, a pesar de lo que dicen estas otras respuestas, esta es una manera furtiva de hacerlo usando el adjacent selector.

HTML:

<ul> 
    <li> 
     <ul> 
      <li>Sub Link 1</li> 
      <li>Sub Link 2</li> 
      <li>Sub Link 3</li> 
     </ul> 
     <a href="#">Menu</a> 
    </li> 
</ul> 

CSS:

* { 
    margin: 0; 
    padding: 0; } 
ul { list-style: none; } 
ul > li { position: relative; } 
ul li a { 
    height: 16px; 
    display: block; } 
ul ul { 
    position: absolute; 
    top: 16px; 
    left: 0; 
    cursor: pointer; 
    display: none; } 
ul li:hover ul { display: block; } 
ul ul:hover + a { color: red; } 

Vista previa: http://jsfiddle.net/Wexcode/YZtgL/

Answer 2

No se pueden seleccionar los elementos primarios en CSS. Necesitarás javascript/jQuery para lograr lo que quieres.

CSS3 selectors...

Answer 3

No es posible seleccionar el padre de un elemento de uso de CSS. Deberá usar JavaScript o bibliotecas de JavaScript como jQuery para implementar esto.

Esto podría ayudarlo. Complex CSS selector for parent of active child

Answer 4

vieja pregunta, y la respuesta aceptada es inteligente. Pero esto es bastante trivial para lograr, con tan sólo un cambio en el CSS de:

#nav-wrapper ul li a:hover 

a:

#nav-wrapper ul li:hover>a 

Esto no va a funcionar en IE6 (que el navegador sólo entiende flotar sobre estilos anclas) Pero tampoco el selector del combinador de hermanos adyacentes (+).

Ver this jsFiddle para la solución en acción

Answer 5

La solución de @CherryFlavourPez por encima de las obras. La razón por la que funciona no se explica claramente. Tenga en cuenta que el elementoli (el uno con el texto "Más") es un padre del submenú (el ul con los cinco li elementos en ella). El elemento a es un (adyacente) hermano del submenú.Por lo tanto, cuando está sobre el submenú, en realidad todavía está sobre el elemento principal li.