выпадающее меню

[aleksej]

помогите, сделал выпадающее меню, но проблема в том, когда сделал основной контент, при выпадении меню, контент уходит вниз из-за меню, как сделать, чтобы меню выпадала на контент, тоесть поверх моего контента и не сдвигало его?? Если нужен код пишите!

[Softlink]

Ну вы бы сразу код показали. А на вскидку, то добавьте выпадающему меню position: absolute; а родительскому пункту position: relative; Телепатия подсказывает именно такой вариант.

[Switch74]

нужно воспользоваться position:absolute а для какого элемента в вашем меню это нужно я не знаю - нет кода

[aleksej]

HTML-

<div id="nav">

<li><a href="#">Главная</a></li>

<li><a href="#">История</a></li>

<li><a href="#">Команды</a>

<ul>

<li><a href="#">CS:GO</a></li>

<li><a href="#">Dota 2</a></li>

<li><a href="#">SC 2</a></li>

<li><a href="#">FIFA</a></li>

<li><a href="#">WoT</a></li>

</ul>

</li>

<li><a href="#">Турниры</a></li>

<li><a href="#">Партнеры</a></li>

<li><a href="#">О нас</a></li>

</div>

<div class="content">

<div class="post-main">

</div>

</div>

CSS-

#nav{

width: 900px;

margin: 300px 200px 0px 200px;

}

li{

list-style: none;

float: left;

width: 140px;

}

ul{

display: none;

}

a{

text-decoration: none;

font: 24px "Arial"; color:#FFFFFF;

background: #000;

display:block;

margin: 3px;

padding: 10px;

text-align: center;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-border-radius: 5px;

}

a:hover{

background: #ccc;

color: #444;

}

li:hover ul {

display: block;

}

.content{

width:600px;

height:1000px;

float:left;

margin: 0px 240px 340px 0px;

}

.post-main{

width:600px;

height:1000px;

float:left;

border: 1px solid #000;

background:#fff;

margin: 10px 0px 0px 320px;

}

вот)

[Switch74]

#nav {position:relative}

#nav ul{position:absolute}

[rus]

исправьте ошибки:

<div id="nav">
    <li><a href="#">Главная</a></li>
<li><a href="#">История</a></li>
<li><a href="#">Команды</a>
<ul>
   <li><a href="#">CS:GO</a></li>
<li><a href="#">Dota 2</a></li>
<li><a href="#">SC 2</a></li>
<li><a href="#">FIFA</a></li>
<li><a href="#">WoT</a></li>
</ul>
</li>
<li><a href="#">Турниры</a></li>
<li><a href="#">Партнеры</a></li>
<li><a href="#">О нас</a></li>
  </div>

[aleksej]

Switch74- не помоголо(

rus- я новичек в этом, какие тут ошибки?

[deadrash]

Switch74- не помоголо(

rus- я новичек в этом, какие тут ошибки?

Необходимо правильно открывать и закрывать теги. Тег "li" может быть только вложенным тегом для "ul" или "ol"

http://htmlbook.ru/samhtml/spiski

http://htmlbook.ru/samhtml/spiski/markirovannyy-spisok

http://htmlbook.ru/samhtml/spiski/numerovannyy-spisok

[aleksej]

исправил html, но все-равно контент отходит вниз, теперь код такой

Html-

<div class="main">

<div class="content-main">

<ul class="menu">

<li><a href="#">Главная</a></li>

<li><a href="#">История</a></li>

<li><a href="#">Команды</a>

<ul>

<li><a href="#">CS:GO</a></li>

<li><a href="#">DOTA 2</a></li>

<li><a href="#">ST 2</a></li>

<li><a href="#">WoT</a></li>

<li><a href="#">FIFA</a></li>

</ul>

</li>

<li><a href="#">Партнеры</a></li>

<li><a href="#">Форум</a></li>

<li><a href="#">О нас</a></li>

</ul>

</div>

</div>

<div class="content">

<div class="post-main">

<h1><a href="#">Title </a><span> 13.03.2013</span></h1>

<div class="post">

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t</p>

<p><a href="#">Read next</a></p>

</div>

CSS-

*{

padding:0; margin:0;

}

body{

background: url(images/fon.jpg);

width: 1265px;

width: 100%;

}

.header{

background: url(images/head.jpg) center no-repeat;

width: 1260px;

height: 300px;

}

.main{

width:970px; margin:0 auto;

}

.menu{

width: 900px;

margin: 0px 200px 0px 60px;

position: relative;

}

.menu li{

list-style: none;

float: left;

width: 140px;

}

.menu li a{

text-decoration: none;

font: 24px "Arial"; color:#FFFFFF;

background: #000;

display:block;

margin: 3px;

padding: 10px;

text-align: center;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-border-radius: 5px;

}

.menu li a:hover{

background: #ccc;

color: #444;

}

.menu li ul{

float: none;

display: none;

position: absolut;

}

.menu li ul a{

text-decoration: none;

font: 24px "Arial"; color:#FFFFFF;

background: #000;

display:block;

margin: 3px;

padding: 10px;

text-align: center;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-border-radius: 5px;

}

.menu li ul a:hover{

background: #ccc;

color: #444;

}

.menu li:hover ul {

display: block;

position: relative;

list-style: none;

margin: 0;

padding: 0;

}

.content{

width:680px;

height:1000px;

float:left;

margin: 0px 0px 0px 150px;

}

.post-main{

border: 1px solid #000;

width:680px;

height:200px;

background:#fff;

padding: 5px 0px 0px 0px;

}

.post-main h1{

font:16px Garamond;

color:#000;

background:#fff;

width:680px;

}

.post-main h1 a{

font:normal 36px Garamond;

color:#000;

text-decoration: none;

}

.post-main h1 a:hover{

font:normal 36px Garamond;

color:#000;

text-decoration: underline;

}

.post-main h1 span{

font:normal 17px Garamond;

color:#fff;

}

.post{

margin:0px 15px 15px 15px;

font:normal 17px Garamond;

color:#000;

}

.post p a{

font:normal 14px Garamond;

color:#000;

padding: 30px 0px 0px 580px;

text-decoration: underline;

}

.post p a:hover{

text-decoration: none;

}

что делать?((

[deadrash]

С кодом ошибся...

А что бы сверху открывалось меню, вам уже писали "position: absolute; а родительскому пункту position: relative;"

Изучайте что такое position.

http://htmlbook.ru/css/position

Edited March 26, 2013 by deadrash

[decode]

.menu li - добавить position: relative;

.menu li:hover ul - удалить position: relative; и добавить position: absolute; top: 100%;

[aleksej]

decode - огромное спасибо, мне все примерно это говорили, но не говорили где именно поставиь, спастбо вам!!

и спасибо всем!))