Задать вопрос
anton541
@anton541

Плавное меню на CSS/HTML?

Доброго времени суток!
Есть конфигурация меню для сайта:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #navbar ul{
        display: none;
        background-color: #f90;
        position: absolute;
        top: 100%;
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
        height: 30px;
        background-color: #666;
        padding-left: 25px;
        min-width: 470px;
      }
      #navbar li {
        float: left;
        position: relative;
        height: 100%;
transition: 0.5s;
      }
      #navbar li a {
        display: block;
        padding: 6px;
        width: 100px;
        color: #fff;
        text-decoration: none;
        text-align: center;
      }
      #navbar ul li { float: none; }
      #navbar li:hover { background-color: #f90; }
      #navbar ul li:hover { background-color: #666; }
    </style>
  </head>
 
  <body>
  
    <ul id="navbar">
      <li><a href="#"><big><FONT COLOR=white><B>Меню</B></big></a>
        <ul>
          <li><a href="file:site.html">Главная</a></li>
          <li><a href="file:presentation.html">Презентация</a></li>
          <li><a href="file:code.html">Исходный код</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>


Интересует вопрос: как мне сделать так, чтобы подменю (которое появляется при наведении курсора) появлялось плавно, как при наведение на основное меню (параметр transition: 0.5s; ) ?
  • Вопрос задан
  • 851 просмотр
Подписаться 1 Средний Комментировать
Решения вопроса 1
Kurokq
@Kurokq
Наполни смыслом каждое мгновенье

вместо display:none;display:block; задай в opacity:0; opacity:1;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы