Проблема с выпадающим меню

[steks]

Здравтсвуйте! Возникла следующая проблема. Создаю выпадающее меню с помощью css, по отдельности выводится нормально, все работает. НО! Стоит только после этого меню добавить блок со свойсвом position: relative менюшка перестает корректно работать. При наведении курсора на нее - исчезает!

Вот код:

Файл со стилями

div#panel {width:100%; border-top: 1px solid #000; border-bottom: 1px solid #000; float:left;}
	div#panel ul{margin: 0 0 0 40px; font-size:13px; font-weight: bold; letter-spacing: 2px;} 
	div#panel li{float:left; position: relative; padding: 8px 0; list-style-type: none; border-right: 1px solid #444;}
		div#panel li:first-child{border-left: 1px solid #444;}
		div#panel li:hover{background:url(images/shablon_14.jpg) #F60; }
	div#panel a{text-decoration: none;  font-size:.9em; color: #FC3; padding: 11px 25px; margin: 0em;}
		div#panel a:link{text-decoration: none; font-weight: bold;}
		div#panel a:hover{text-decoration: none; color: #000; font-weight: bold;}
body div#panel ul li ul {display: none;}
//div#panel ul li:hover ul, div#panel ul li ul:hover {display: block;}
div#panel ul li ul {position: absolute; left: -1px; top: 35px; margin:0; width: 170px; }
div#panel ul li ul li{width: 100%;  border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333;}
div#panel ul li ul li:first-child{border-top: 1px solid #333;}

html файл

<div id="panel">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/articles/">Статьи</a>
	<ul>
		<li><a href="">Фотообзоры</a></li>
		<li><a href="">Авто и девушки</a></li>
		<li><a href="">Автовыставки</a></li>
	</ul>
</li>
</ul>

</div> <!--end panel-->

[ceil100]

блок с относительным позиционированием перекрывает плавающий блок

отсюда и проблемы с меню

clear:both; для нижележащего блока, не даст ему вылезть вверх

Edited December 3, 2011 by ceil100

[steks]

блок с относительным позиционированием перекрывает плавающий блок

отсюда и проблемы с меню

clear:both; для нижележащего блока, не даст ему вылезть вверх

неа, не помогает

[irinablue]

неа, не помогает

можно код того, что не помогает?

используйте clear:both; и z-index

http://jsfiddle.net/irinablue/k8yJs/1/

[ceil100]

У меня помогает, у тебя нет...

интересно почему?

z-index тут и не нужен кстати

Edited December 4, 2011 by ceil100

[steks]

неа, не помогает

можно код того, что не помогает?

используйте clear:both; и z-index

http://jsfiddle.net/irinablue/k8yJs/1/

<div id="upper">
<div id="panel">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/articles/">Статьи</a>
	<ul>
		<li><a href="">Фотообзоры</a></li>
		<li><a href="">Авто и девушки</a></li>
		<li><a href="">Автовыставки</a></li>
	</ul>
</li>
</ul>

</div> <!--end panel-->
</div>
<div class="center">
<p>пмомроро</p>
</div>

div#panel {width:100%; border-top: 1px solid #000; border-bottom: 1px solid #000; float:left;}
 div#panel ul{margin: 0 0 0 40px; font-size:13px; font-weight: bold; letter-spacing: 2px;} 
 div#panel li{float:left; position: relative; padding: 8px 0; list-style-type: none; border-right: 1px solid #444;}
 div#panel li:first-child{border-left: 1px solid #444;}
 div#panel li:hover{background:url(images/shablon_14.jpg) #F60; }
 div#panel a{text-decoration: none; font-size:.9em; color: #FC3; padding: 11px 25px; margin: 0em;}
 div#panel a:link{text-decoration: none; font-weight: bold;}
 div#panel a:hover{text-decoration: none; color: #000; font-weight: bold;}
 body div#panel ul li ul {display: none;}
div#panel ul li:hover ul, div#panel ul li ul:hover {display: block;}
 div#panel ul li ul {position: absolute; left: -1px; top: 35px; margin:0; width: 170px; }
 div#panel ul li ul li{width: 100%; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333;}
 div#panel ul li ul li:first-child{border-top: 1px solid #333;}

.center{position: relative; clear: both;}

При чем у блока center обязательно должно стоять позиционирование relative!

все спасибо всем! разобрался) у менюхи position:relative забыл поставить)

Edited December 4, 2011 by steks

[SelenIT]

div#panel

Зачем div? Для усиления специфичности? Просто #panel недостаточно?