Абсолютное позиционирование элемента заставляет элемент отображать встроенный в IE

У меня есть список, который бы хотел, чтобы основные элементы выравнивались по вертикали, а подэлементы каждого - вниз под основным элементом. Я хочу сохранить позицию: абсолютный в классе subNav, потому что ширина этого навигатора будет варьироваться от каждого, поэтому я не могу установить ширину. Это работает в Firefox, но в IE 7 абсолютное приводит к тому, что subnav отображает inline (поэтому сдвигается вправо и вверх от того места, где я хотел бы). Как я могу это исправить?Абсолютное позиционирование элемента заставляет элемент отображать встроенный в IE

Пример:

<style> 
#nav ul, #nav li ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#nav li { 
    float: left;  
    width: 120px; 
    border-right: 1px solid #000; 
    padding: 10px; 
} 
#nav li ul li { 
    float: none;  
    width: auto; 
    height: auto; 
    border-right: none; 
    text-align: left; 
    padding: 0; 
} 

#nav .subNav { 
    background: #eee; 
    position: absolute; 
    padding: 10px; 
} 
</style> 
</head> 

<body> 
<div id="nav"> 
    <ul> 
    <li>Main One     
      <ul class="subNav"> 
     <li>Sub One A</li> 
     <li>Sub One B</li> 
     </ul>   
    </li> 
    <li>Main Two  
     <ul class="subNav"> 
     <li>Sub Two A</li> 
     <li>Sub Two B</li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</body>

источник

2009-08-17 Anonymous

Не забудьте положить в вашем верхнем и левом значении.

nav .subNav{ 
    top:10px; 
    left:20px; 
} 

nav.containerDiv { 
    position:relative; 
}

HTML

<ul class="nav"> 
    <li> 
     <div class="containerDiv"> 
     <ul class="subNav">... 
     </div> 
    </li> 
</ul>

Это приведет к subNav будучи относительно контейнера DIV, а не весь документ.

источник

2009-08-17 19:18:38 Zoidberg

Но если я положил левую позицию в subNav, которая имеет абсолютное позиционирование, то все элементы subNav будут отображаться вертикально в том же месте, которое я не хочу. Я хочу, чтобы они отображались непосредственно под их оригинальной копией. – 2009-08-17 19:25:41

Затем поместите div вокруг списка вспомогательных навигаторов и сделайте, чтобы div имел положение относительно позиция: относительная; и убедитесь, что ваш sub nav div находится внутри этого div. То, что css будет делать, - сделать абсолютное позиционирование первым родительским элементом с позиционным относительным или абсолютным положением, в данном случае вашим новым div. Я отредактирую ответ, чтобы показать это – Zoidberg

Абсолютное позиционирование элемента заставляет элемент отображать встроенный в IE

ответ

Смежные вопросы