menu : Mantener efecto en padre mientras se visualiza el hijo

[ArturoGallegos]

se aplica al <li> porque el efecto que buscas se aplica durante el hover si lo aplicas al elemento <a> al pasar el ratón al submenu se pierde el hover sin embargo el <li> lo sigue manteniendo ya que el ratón nunca ha salido del <li> solo se posiciono en un elemento hijo.

mmm creo que mi explicación fue un poco mareadora jeje pero con un código de ejemplo quedara mas claro

Código CSS:

#menu{margin:0;padding:0;}
#menu li{float:left;margin:0 2px;position:relative;list-style:none;background:#fe0;}
#menu li a{padding:3px 8px;}
#menu li ul{display:none;width:120px;margin:0;padding:0;position:absolute;}
#menu li:hover ul,#menu li ul:hover{display:block;}
#menu li:hover{background:#f00;}
 

Código HTML:

<ul id="menu">
    <li><a href="#">Item 1</a>
        <ul>
            <li><a href="#">SubItem 1</a></li>
            <li><a href="#">SubItem 2</a></li>
            <li><a href="#">SubItem 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">SubItem 1</a></li>
            <li><a href="#">SubItem 2</a></li>
            <li><a href="#">SubItem 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>
 

y si mal interprete lo que tu buscabas hasmelo saber, igual si tienes algún sitio donde se utilice deja link y revisamos