ul div выталкивает из родителя

Question

У меня проблема с ul div. Мой родительский div для ul не удерживает его. У меня есть родительский div (subMenu), позиционированный и z-индексированный, но дочерний элемент ul (subMen) просто выталкивается и отображается в нижней части, когда он должен содержаться в пределах родительский и подошел к позиции, которую я применил к родительскому. Я пробовал использовать float и list-style. Но ничего не имеет значения. Вот код CSS:

#subMenu { 
background-image: url(images/sub_nav_background2.png); 
width: 1280px; 
height: 60px; 
position: relative; 
top: -145px; 
z-index: -100; 
} 

#subMen { 
margin-left: 330px; 
list-style-position: inside !important; 
float: left !important; 
height: 20px; 
width: 900px !important; 
font-size: 14px; 

} 

Это раздел HTML, посвященный этой проблеме.

<div id="subMenu"> 
     <ul id="subMen"> 
     <li><a href="#">BRAND MARKETING</a></li> 
     <li><a href="#">EXPERIENTIAL MARKETING</a></li> 
     <li><a href="#">PERFORMANCE SOLUTIONS</a></li> 
     <li><a href="#">MEETING & EVENT SOLUTIONS</a></li> 
     </ul> 
     </div> 
<div class="clearfix"></div> 

А вот IMAGE того, что происходит.

Внизу внизу меню должно находиться в этой серой области и заправлено под основной навигационной панелью вверху.

Answer 1

Когда вы плаваете что-то, он может покинуть свой родительский div. Вы должны добавить свойство overflow своим родителям. Если вы укажете overflow: hidden, это скроет переполнение; overflow: scroll будет прокручиваться.

Рабочий пример: http://jsfiddle.net/BZFTY/2/.

В приведенной выше скрипте попробуйте изменить свойство переполнения на разные значения: default, scroll и hidden.

Answer 2

Я собрал скрипку на основе вашего кода.

http://jsfiddle.net/wby6W/1/

#subMenu { 
background:#ccc; 
width: 1280px; 
height: 60px; 
position: relative; 
z-index: -100; 
overflow:hidden; 
} 

#subMen { 
margin-left: 330px; 
float: left; 
width: 900px; 
font-size: 14px; 
} 

Я удалил верхний: -145px потому что мне нужно, чтобы увидеть текст в окне. Я также добавил переполнение: скрытый для вашего CSS, как было предложено выше.

Answer 3

Вы можете сделать

list-style-position:inside;