http://jsfiddle.net/kyzjkb1u/

#nav7, #nav7 ul, #nav7 li { margin: 0; padding: 0; } #nav7, #nav7 ul { background: rgb(46,95,122); } #nav7 { /* подменю перемещается относительно меню */ position: relative; display: table; width: 100%; } #nav7 ul { /* подменю находится вне потока */ position: absolute; z-index: 5; display: none; } #nav7 li:hover ul { /* подменю будет показано, если курсор наведён на пункт меню с выпадающем списком */ display: block; } #nav7 li { display: table-cell; text-align: center; } #nav7 ul li { display: block; text-align: left; } #nav7 .right { /* последнее подменю будет расширяться справа налево */ direction: rtl; } #nav7 .right ul { /* для IE, решение найдено случайно, где связь ??? */ right: 0; } #nav7 .right li { /* последнее подменю будет расширяться справа налево, но не пункты последнего подменю */ direction: ltr; } #nav7 a { display: block; padding: 3px 0; color: #fff; text-decoration: none; } #nav7 ul a { padding: 3px 15px; } #nav7 li:hover { background: rgb(96,145,172); } 
 <ul id="nav7"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <ul> <li><a href="#2-1">Подменю 1</a> <li><a href="#2-2">Подменю 2</a> <li><a href="#2-3">Подменю 3</a> <li><a href="#2-4">Подменю 4</a> </ul> <li><a href="#3">Пункт 3</a> <ul> <li><a href="#3-1">Подменю 1</a> <li><a href="#3-2">Подменю 2</a> </ul> <li class="right"><a href="#4">Пункт 4</a> <ul> <li><a href="#4-1">Подменю 1</a> <li><a href="#4-2">Подменю 2</a> <li><a href="#4-3">Подменю 3</a> </ul> </ul>

  • I'm sorry but are you doing only the desktop version? - user33274

1 answer 1

Inserted in 2 places for several properties:

In #nav7 ul and also deleted display: none

 opacity: 0; /* По умолчанию скрываем подменю */ visibility: hidden; transition: all .3s ease .4s;

The transition: all .3s ease .4s property transition: all .3s ease .4s adds animation for 0.3 seconds and a delay of 0.4 seconds

In #nav7 li:hover ul deleted display: block

 opacity: 1; /* Показываем подменю при ховере */ visibility: visible;

It turns out this code with modified blocks:

 #nav7, #nav7 ul, #nav7 li { margin: 0; padding: 0; } #nav7, #nav7 ul { background: rgb(46,95,122); } #nav7 { /* подменю перемещается относительно меню */ position: relative; display: table; width: 100%; } #nav7 ul { /* подменю находится вне потока */ position: absolute; z-index: 5; opacity: 0; /* По умолчанию скрываем подменю */ visibility: hidden; transition: all .3s ease .4s; } #nav7 li:hover ul { /* подменю будет показано, если курсор наведён на пункт меню с выпадающем списком */ opacity: 1; /* Показываем подменю при ховере */ visibility: visible; } #nav7 li { display: table-cell; text-align: center; } #nav7 ul li { display: block; text-align: left; } #nav7 .right { /* последнее подменю будет расширяться справа налево */ direction: rtl; } #nav7 .right ul { /* для IE, решение найдено случайно, где связь ??? */ right: 0; } #nav7 .right li { /* последнее подменю будет расширяться справа налево, но не пункты последнего подменю */ direction: ltr; } #nav7 a { display: block; padding: 3px 0; color: #fff; text-decoration: none; } #nav7 ul a { padding: 3px 15px; } #nav7 li:hover { background: rgb(96,145,172); } 
 <ul id="nav7"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <ul> <li><a href="#2-1">Подменю 1</a> <li><a href="#2-2">Подменю 2</a> <li><a href="#2-3">Подменю 3</a> <li><a href="#2-4">Подменю 4</a> </ul> <li><a href="#3">Пункт 3</a> <ul> <li><a href="#3-1">Подменю 1</a> <li><a href="#3-2">Подменю 2</a> </ul> <li class="right"><a href="#4">Пункт 4</a> <ul> <li><a href="#4-1">Подменю 1</a> <li><a href="#4-2">Подменю 2</a> <li><a href="#4-3">Подменю 3</a> </ul> </ul>

  • I liked it but should not work on mobile phones - user33274
  • one
    @LenovoID yes, mobile phones do not hold it, and this kind of animation is not needed on mobile phones, the response of the interface should be instantaneous. - Vasily Barbashev
  • in general it seems to me (only my opinion) that both the desktop and mobile versions should be at least on jquery - user33274
  • one
    @LenovoID I can not disagree, my example is only adding to the author's question, he did not use js anywhere, I showed that it is possible and so. And so about js, I totally agree with you. - Vasily Barbashev