Почему мои дивы перекрываются?
У меня есть контейнер, в котором есть весь код. Внутри, у меня есть книжка див и див.
Контейнер расположен относительно, в то время как навигатор и середина расположены абсолютно.
Кроме того, немного странный вопрос, но в 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 , чтобы переместить середину, но я не удовлетворен, так как все еще не так отзывчиво, как я хочу.