Новичок. Помогите, пожалуйста, по верстке.

Stranger · February 21, 2013

Проблема в следующем: выпадающее меню сдвигает остальные блоки, вместо того, чтобы просто отображаться поверх.

Приношу извинения, если такая тема была ранее, но не нашел. Все, что находил - не помогало.

Привожу код.

Разметка

<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="windows-1251" />
<title></title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#">Главная</a></li>
<li><a href="#">Навигация</a>
<ul>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Меню 2_2</a></li>
<li><a href="#">Меню 2_3</a></li>
<li><a href="#">Меню 2_4</a></li>
</ul>
</li>
<li><a href="#">Дополнительно</a></li>
<li><a href="#">Информация</a></li>
<li><a href="#">Контакты</a></li>
<div id="effect"></div>
</ul>
</div>



</body>
</html>

стили

body{background-color:black;}
#nav {
margin:0 auto;
overflow:hidden;
list-style:none;
padding:0;
position:relative;
text-align:center;
width:900px;
}
#nav li {
padding:10px 0;
}
#nav a {
color: #999;
font: bold 12px Arial, Helvetica;
text-decoration:none;
text-shadow: 0 1px 0 #000;
}
#menu ul li {
border:1px solid black;
border-radius:4px;
float:left;
position:relative;
text-decoration:none;
text-transform:uppercase;
width:178px;
}
#nav a:hover {
color:#00b0d3;
}
#menu ul ul {
display:none;
position:relative;
}
#menu ul li:hover > ul {
display:block;
list-style:none;

}
#menu ul ul li {
position:relative;
right:40px;
top:10px;
width:178px;
border-top:1px dotted #999;
}

Заранее спасибо.

Edited February 21, 2013 by alexriz
Используйте для кода тег CODE!!!

Sensei · February 21, 2013

#menu ul ul {
   position: absolute;
}

Stranger · February 22, 2013

В том то и проблема. Пробовал, но в таком случае меню вообще не выпадает. Может, еще каким советом поможете? Может, я где0то изначально ошибся в позиционировании родительских/дочерних элементо.

Sensei · February 22, 2013

Не выпадает потому что у #nav прописано overflow: hidden.

Вот, держите, подчистил немного http://jsfiddle.net/sensei/3pM56/

Stranger · February 22, 2013

Спасибо за помощь, теперь все замечательно работает!!!))

Sign In

Новичок. Помогите, пожалуйста, по верстке.

Question

Stranger

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

Stranger

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

Stranger

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information