Показать сообщение отдельно
  #4 (permalink)  
Старый 06.02.2016, 20:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,138

dima_riabets,
<!DOCTYPE html>

<html>
<head>
  <title>Вертикальное выпадающее меню на CSS без JS</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
  <style type="text/css">ul.ddd{
    width:990px;
    padding:0;
    margin:0;
    list-style:none;
    background:#fff;
    position:relative;
    border:0;
    position:relative;
  }

  ul>li{
    width:240px;
  }

  ul li a,ul li a:visited{
    display:block;
    height:25px;
    line-height:25px;
    border:1px solid #000;
    color:#FAFAD2;
    background:#4682B4;
  }

  a+ul{
    list-style:none;
    visibility:hidden;
    position:absolute;
    left:240px;
    top:2px;
    display:block;
    width:750px;
    padding:0;
    margin:-2px 0;
    border:1px Solid red;
    height:98%;
  }

  a:hover+ul{
    visibility:visible;
  }

  li:hover>a{
    color:#4682B4;
    background:#FAFAD2;
  }
  </style>

  <ul class="ddd">
    <li>
      <a href="#">Уровень 1 п 1</a>

      <ul>
        <li>div_block1</li>
      </ul>
    </li>

    <li>
      <a href="#">Уровень 1 п 2</a>

      <ul>
        <li>div_block2</li>
      </ul>
    </li>

    <li>
      <a href="#">Уровень 1 п 3</a>

      <ul>
        <li>div_block3</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Последний раз редактировалось рони, 06.02.2016 в 20:45.
Ответить с цитированием