CSS3 - выпадающее меню hover

Question

Я создал раскрывающееся меню, и теперь я хочу навести курсор на пункты главного меню, но список («выпадающее меню») ниже этого главного меню не будет. Я мог бы дать моим ul и li классу, чтобы решить эту проблему, но есть ли более гладкий или чистый способ?

Я ценю каждый комментарий!

EDIT - CSS код:

#mainnav li ul:not:hover { 
    none !important; 
} 

#mainnav ul li a:hover { 
    background-color: #ff4040; 
} 

Так парения делает работу, конечно, но его включают все ul и li

Answer 1

Вы должны использовать > child selector

#mainnav li ul{ 
    display:none; 
} 
#mainnav li:hover > ul{ 
    display:block; 
} 
#mainnav ul li a:hover { 
    background-color: #ff4040; 
} 

Таким образом, вы установите ul будет скрыто по умолчанию (первое правило), и когда вы наведите курсор на li, то покажет только его ul ребенок (и не глубже).