Member 14013051 Ответов: 1

Почему мои дивы перекрываются?


У меня есть контейнер, в котором есть весь код. Внутри, у меня есть книжка див и див.
Контейнер расположен относительно, в то время как навигатор и середина расположены абсолютно.
Кроме того, немного странный вопрос, но в Internet Explorer (не судите) выпадающее меню отдела навигации открывается горизонтально, а не вертикально. Я, кажется, не могу найти причину, по которой он это делает.

Вот этот HTML код
<div id="Container">
      <div class="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Cars</a></li>
          <li><a href="#">Parts & Tools</a>
            <ul>
              <li><a href="#">Parts</a></li>
              <li><a href="#">Tools</a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

    </div>


Вот css - код для divs (мой оригинальный код был улучшен Крисом Хэппи из html - css - почему мой nav div и средний div перекрываются? - переполнение стека[^])
div#Container
{
  position: relative;
}

.nav
{
  width: 100%;  
  position: absolute;
  background-color: white;  /*Code to add a white background to list*/
  padding: 15px;  
}

div#middle
{
  position: absolute;
}


Вот код выпадающего меню для css, если вы хотите взглянуть
.nav a
  {
    color: #ffffff;
    text-decoration: none;
    background-color: #000000;
  }

  .nav ul
  {
    display:block;
  }

  .nav ul a
  {
    display: block;
    float:left;
    width: 150px;
    padding: 10px 20px;
    border: 1px solid #ffffff;
    text-align: center;
    font-size: 1.3em;
  }

  .nav ul a:hover
  {
    background: red;
  }

  .nav ul li
  {
    display: inline-block;
    vertical-align: top;
  }
  
  .nav ul ul li {  display: block;  }

  .nav ul li:hover > ul
  {
    display:block;
  }

  .nav ul li ul
  {
    margin:0;
    padding: 0;
    display: none;
    background-color: #000000;
    top: 45px;


Что я уже пробовал:

Я использовал top: x и left: y , чтобы переместить середину, но я не удовлетворен, так как все еще не так отзывчиво, как я хочу.

1 Ответов

Рейтинг:
0

raddevus

Вот jsfiddle вашего кода:
Edit fiddle - JSFiddle[^]

Он отлично смотрится в FireFox и Edge.
Похоже, что даже JS Fiddle теперь не хочет поддерживать IE. Интересный.

Вот он как JSBin : JS Bin - совместная отладка JavaScript[^]

Я протестировал его в IE 11.666.16299.0, и он отлично работает.