Как сделоать садержку в CSS?
Есть дерево каталога
/* CSS Document */ ul#navmenu-v, ul#navmenu-v li, ul#navmenu-v ul { margin: 0; border: 0 none; padding: 0; width: 169px; list-style: none; z-index:9999; } ul#navmenu-v:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu-v li { float: left; display: block !important; display: inline; position: relative; /* border:#000000 1px solid; */} ul#navmenu-v li ul li { border:none; z-index:9999; } /* Root Menu */ ul#navmenu-v a { padding: 0 0 0 18px; display: block; color: #000000; font: bold 11px/25px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } ul#navmenu-v a:hover, ul#navmenu-v li:hover a, ul#navmenu-v li.iehover a { background: #FFFFFF; color: #000000; border:none; z-index:9999; } /* 2nd Menu */ ul#navmenu-v li:hover li a, ul#navmenu-v li.iehover li a { background: #ffffff; color: #000000; z-index:9000; padding:0 0 0 15; font: 13px/22px Verdana, Arial; setTimeout(1000); } ul#navmenu-v li:hover li a:hover { background: #e2e2e2; z-index:9999; } ul#navmenu-v li:hover li:hover a, ul#navmenu-v li.iehover li a:hover, ul#navmenu-v li.iehover li.iehover a {} ul#navmenu-v ul, ul#navmenu-v ul ul, ul#navmenu-v ul ul ul { display: none; position: absolute; top: 0; left: 174px; background: ffffff; border:#000000 3px solid; z-index:9999; } ul#navmenu-v li:hover ul ul, ul#navmenu-v li:hover ul ul ul, ul#navmenu-v li.iehover ul ul, ul#navmenu-v li.iehover ul ul ul { display: none; } ul#navmenu-v li:hover ul, ul#navmenu-v ul li:hover ul, ul#navmenu-v ul ul li:hover ul, ul#navmenu-v li.iehover ul, ul#navmenu-v ul li.iehover ul, ul#navmenu-v ul ul li.iehover ul { display: block; } При наведении курсором по ссылке, открываются подкатегории, при убирании курсора исчезают. Как сделать так, чтобы все это делалось плавно, либо при убирании курсора не сразу исчезало, а через 1 сек например. |
свойства
transition или animation в помощь |
А может кто помочь мне реализовать с помошью transition данный эффект в приведенном выше CSS?
Бьюсь какой день, ничего путного не получается... никак не могу понять принцип работы. |
up
|
С таким кодом ни транзишн, ни animation не поможет, т.к. они не могут работать на display:none\block. Как вариант надо работать с opacity+position. На ховере мы без транзишена вытаскиваем подменю из-под родителя и потом плавно делаем ему непрозрачность через транзишн.
Примерно так http://jsfiddle.net/Softlink/HUeR5/ (сделал для вебкита) |
Часовой пояс GMT +3, время: 05:49. |