выпадающий список у резинового меню

[scarface.93]

друзья, подскажите как сделать выпадающее список в резиновом меню?

код html 

<div id="menu"><ul class="menu"><li><a href="#">Создание сайта</a></li><li><a href="#">Веб-дизайн</a></li>    <li><a href="#">(X)HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">CMS</a></li>    <li><a href="#">Веб-програмирование</a></li>     <ul>         <li>JavaScript</li>            <li>PHP</li>            <li>Pen</li>        </ul>    <li><a href="#">Ресурсы</a></li>    <li><a href="#">Статьи</a></li>    <li><a href="#">Форум</a></li>    </ul></div>

код css

#menu{width:1300px;margin:0 auto;}.menu{display:table-row;list-style:none;margin-bottom:10px;}.menu li{display:table-cell;width:auto;text-align:center; height:30px;vertical-align:bottom;}.menu li:hover{background:#e27e0f;}.menu li a{display:block;width:1000px;height:50px;vertical-align:middle;display:table-cell;text-decoration:none;color:#000;font:14px Verdana, Geneva, sans-serif}.menu li a:hover{color:#FFF}

 

 

 

[WEB-best]

Не совсем понятна ваша проблема. Сделать можно многими способами, все зависит от конкретного случая.

[Haindell]

Нужно, чтобы при наведении на Веб-программирование показывались JavaScript, PHP, Pen?

[scarface.93]

  On 3/30/2014 at 7:08 PM, Haindell said:

Нужно, чтобы при наведении на Веб-программирование показывались JavaScript, PHP, Pen?

да. я уже сделал выпадающий список, но появилась новая проблема. этот список выталкивает мой контент вниз. 

<div id="menu"><ul class="menu"><li><a href="#">Создание сайта</a></li><li><a href="#">Веб-дизайн</a></li>    <li><a href="#">(X)HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">CMS</a></li>    <li><a href="#">Веб-програмирование</a><ul class="sub-menu" >         <li><a href="#">JavaScript</a></li>            <li><a href="#">PHP</a></li>            <li><a href="#">Pen</a></li>        </ul></li>         <li><a href="#">Ресурсы</a></li>    <li><a href="#">Статьи</a></li>    <li><a href="#">Форум</a></li>    </ul></div>

 

css

 

#menu{width:1200px; margin:0 auto}*html .menu li{display  : inline;}ul.menu{display:table-row;list-style:none;margin-bottom:10px;}.menu li{display:table-cell;width:auto;text-align:center; height:30px;vertical-align:top;}.menu a{display:block;width:1000px;height:35px;vertical-align:middle;display:table-cell;text-decoration:none;color:#000;font:14px Verdana, Geneva, sans-serif}.menu a:hover{background:#e27e0f;color:#fff}ul.sub-menu{display:block;padding:0;}.sub-menu li{display:block;width:100%;}ul.sub-menu{display:none;}.menu li:hover ul.sub-menu{display:block;}

[WEB-best]

Выложите код на jsfifdle

[scarface.93]

http://jsfiddle.net/VP57C/

[Haindell]

  On 3/31/2014 at 8:26 AM, scarface.93 said:

 

  On 3/30/2014 at 7:08 PM, Haindell said:

Нужно, чтобы при наведении на Веб-программирование показывались JavaScript, PHP, Pen?

да. я уже сделал выпадающий список, но появилась новая проблема. этот список выталкивает мой контент вниз. 

<div id="menu"><ul class="menu"><li><a href="#">Создание сайта</a></li><li><a href="#">Веб-дизайн</a></li>    <li><a href="#">(X)HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">CMS</a></li>    <li><a href="#">Веб-програмирование</a><ul class="sub-menu" >         <li><a href="#">JavaScript</a></li>            <li><a href="#">PHP</a></li>            <li><a href="#">Pen</a></li>        </ul></li>         <li><a href="#">Ресурсы</a></li>    <li><a href="#">Статьи</a></li>    <li><a href="#">Форум</a></li>    </ul></div>

 

css

 

#menu{width:1200px; margin:0 auto}*html .menu li{display  : inline;}ul.menu{display:table-row;list-style:none;margin-bottom:10px;}.menu li{display:table-cell;width:auto;text-align:center; height:30px;vertical-align:top;}.menu a{display:block;width:1000px;height:35px;vertical-align:middle;display:table-cell;text-decoration:none;color:#000;font:14px Verdana, Geneva, sans-serif}.menu a:hover{background:#e27e0f;color:#fff}ul.sub-menu{display:block;padding:0;}.sub-menu li{display:block;width:100%;}ul.sub-menu{display:none;}.menu li:hover ul.sub-menu{display:block;}

 

Так задайте z-index

[Q4Dizzy]

Укажите вашему выпадающему меню position: absolute и z-index. Пока не указана position, выпадающее меню находится в потоке, потому контент и сдвигается.

Edited April 1, 2014 by Q4Dizzy

[Haindell]

  On 3/31/2014 at 7:34 PM, Q4Dizzy said:

position: abolute

Ах точно. Забыл про position

[scarface.93]

Спасибо Всем. Помогло))