Форум

dima_riabets · #1 (**permalink**) 06.02.2016, 20:06

Надо такое сделать, вроде на хроме и мозиле работает, но на ИЕ ни в какую, в чем может быть проблема, в менюшках я не очень(

<!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-color: #4682B4;}
ul li a:hover  {color: #4682B4;background-color: #FAFAD2;}

li ul {visibility: hidden; position: absolute; left: 149px; top: 0; display: block; width: 100%; padding: 0;margin: 0;}


li:hover {width: 100%;}
li:hover > ul {visibility: visible; display:block; z-index: 888; position:absolute; list-style:none; width:100%; background: #fff; padding: 0; border: 0; border: 1px Solid red;}
li:hover > a {color:#4682B4;background:#FAFAD2;}
ul a:hover ul {visibility:visible;}
</style>

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

Надо вот такое:

Вот что в IE:

рони · #2 (**permalink**) 06.02.2016, 20:14

dima_riabets,
ни картинки хрома ни картинки ие, увидеть у себя не могу запуская код.

dima_riabets · #3 (**permalink**) 06.02.2016, 20:15

Сообщение от рони

dima_riabets,
ни картинки хрома ни картинки ие, увидеть у себя не могу запуская код.

Можешь сделать такое?
http://i.piccy.info/i9/c8b4eba7c676e...1000023/11.jpg

рони · #4 (**permalink**) 06.02.2016, 20:41

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>

рони · #5 (**permalink**) 06.02.2016, 21:00

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%;
    border-left: none;
    background:#FAFAD2;
  }

   a:hover+ul{
    visibility:visible;
  }

.ddd  li:hover>a{
    border:1px solid red;
    color:#4682B4;
    background:#FAFAD2;
    border-right: none;
  }
  .ddd:hover a{
    border-right:1px solid red;
  }

  </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>

dima_riabets · #6 (**permalink**) 06.02.2016, 23:41

спасибо ОГРОМНОЕ!!! Рони - ты лучший!

Что бы не закрывалось кому надо в конец:

.ddd li:hover > ul {visibility: visible; display:block; z-index: 888; position:absolute; }

Форум

Справочник

Discord чат

Курсы javascript