Показать сообщение отдельно
  #12 (permalink)  
Старый 16.03.2017, 17:49
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони, а тормоза?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
    background:#ccc;
    color:#666;
    font-size:14px;
    height:56px;
    text-transform:uppercase;
    position:relative;
  }

  nav ul{
    text-align:center;
    padding:0;
    display:flex;
    list-style:none;
    margin:0;
    line-height:56px;
  }

  nav li{
    flex:1;
  }

  nav li:hover span{
    opacity: 1;
  }

  nav span{
    opacity: 0;
    position:absolute;
    left:0;
    top:56px;
    width:100%;
    background:#999;
    color:#fff;
    padding:0 10px;
    box-sizing:border-box;
    text-align:left;
    transition: 2s;
  }
  </style>

</head>

<body>
<nav><ul>
      <li>text<span>1 info</span></li>
      <li>text<span>2 text text</span></li>
      <li>text<span>3 text text</span></li>
      <li>text<span>4 text </span></li>
      <li>text<span>5 text text text text</span></li>
      <li>text<span>6 text text</span></li>
</ul></nav>

</body>
</html>
Ответить с цитированием