Сделать hover неработающим на прозрачных элементах - Вопросы по CSS

В общем у меня есть вертикальное меню. Пока что у меня нет анимации и при hover на пункте меню свойство подменю меняется с display:none на display:block;
Хочу добавить анимацию появления подменю: при наведении на пункт меню появляется подменю и подъезжает справа к меню.
Проблема в том, что свойство которым я делаю подменю скрытвм(display:none) не анимируется. Если же это свойство убрать, то подменю(скрытые по visibility и opacity) все равно реагируют на наведение мыши. В результате получается такая ерунда: Подвожу мышь к меню, но не доехав до него пару сантиметров появляется подменю(т.к. именно оно находится с opacity:0 под указателем), но это еще пол беды - если я хочу выбрать другой пункт подменю(например сейчас выбран первый, а я хочу - второй), то вместо этого происходит выбор другого подменю(это я вообще понять не могу), ниже данного.

использую модуль maximenu ck. Встроенные анимации отключил, потому, как они срабатывают через раз. Меню без анимаций выглядит вот так zainskavto.ru - синее вертикальное меню слева.

Анимируйте ширину или позицию, если средствами CSS3 хотите.

я не про это...
короче вот сделал тестовую страничку:
http://zhantrufan.esy.es/

синее меню слева, поводите по нему мышкой:
1. подменю открываются при подводе мышки слева, при "прохождении" по невидимым подменю.
2. Подменю открывается самопроизвольно.

Т.е. если выйти заграницу подменю, то откроется следующее, а должно просто закрыться то подменю с которого съехал указатель.
Как этого избежать?


Короче решил через это
submenu {transform: scale(0, 0);}
submenu:hover {transform: none;}

ибо как сделать родительский элемент анимируемым и недоступным вместе с потомками сразу я хз.

ибо как сделать родительский элемент анимируемым и недоступным вместе с потомками сразу я хз.

Чтоб не наследовалось, нужно явно селекторы указывать. Например так:


Или же обнуляйте стили: