Способ верстки резинового выпадающего меню

[Namico]

Всем, доброго времени суток.

Я учусь верстке самостоятельно и начала с своего сайта. Вот уже второй день не могу решить проблему с меню.

http://saveimg.ru/show-image.php?id=8d51d6118255b79f88ab88766d50c263 - собственно меню

Вопрос в следующем: Я нарезала 3 куска: правую и левую боковушки меню и такого же размера кусочек меню (потом просто повторяла его). Но никак не могу теперь состыковать основное меню и боковушки. Может у меня изначально не правильный подход? Если не сложно, пожалуйста, подскажите, как с такими не стандартными меню следует себя вести.

 

P.S. Простите если была не внимательна и подобная тема уже есть.

[DivMan]

на гугле же полно готовых выпадающих меню и скинь свой код на http://cssdeck.com/

Edited June 5, 2014 by DivMan

[Нарек]

Если честно непонятно о чем Вы спрашиваете. Вы про узоры по бокам? Если да, то их можно ставить картинками через псевдо ::after ::before у ul (если Вы списком делали меню), а верхнюю и нижнюю линию делать через border-top и border-bottom. Ну и плюс тень со сдвигом вниз.

[Namico]

Вопрос стоит не в коде выпадающего меню которого полно в гугле. Вопрос стоит как правильно резать и реализовывать подобные меню (полностью вырезать картинку меню и ставить бекграундом, лепить из 3 картинок, лепить из двух картинок и дорисовывать через border).

По поводу реализации через

псевдо ::after ::before у ul (если Вы списком делали меню), а верхнюю и нижнюю линию делать через border-top и border-bottom

тоже приходила в голову, но потом прийдется подгонять тень на рисунках верхней/нижней линии.

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

[Namico]

Код сейчас выглядит так:

html<div class="menu">            <ul>                <li class="main_menu"><a href="#">Ведмедики</a>                    <ul>                        <li class="sub_menu"><a href="#">Ведмедики квіткові</a></li>                        <li class="sub_menu"><a href="#">Ведмедики декоративні</a></li>                    </ul>                </li>                <li class="main_menu"><a href="#">Іграшки з квітів</a>                    <ul>                        <li class="sub_menu"><a href="#">Смайли із квітів</a></li>                        <li class="sub_menu"><a href="#">Звірятка із квітів</a></li>                    </ul>                </li>                <li class="main_menu"><a href="#">Солодощі з квітів</a></li>                <li class="main_menu"><a href="#">Подарункові кошики</a></li>                <li class="main_menu"><a href="#">Подарункова упаковка</a>                    <ul>                        <li class="sub_menu"><a href="#">Коробочки із живих квітів</a></li>                        <li class="sub_menu"><a href="#">Коробочки декоровані</a></li>                        <li class="sub_menu"><a href="#">Коробочки для грошей</a></li>                    </ul>                </li>                <li class="main_menu"><a href="#">Для закоханих</a></li>            </ul>        </div>css.menu {    min-width: 200px;    max-width: 1500px;    margin: 0px 93px 0px 93px;    background: url(../img/menu.png) repeat-x;    font-size: 15px;    text-transform: uppercase;}.menu ul {    display: inline-table;    position: relative;}.main_menu {    display: table-cell;    width: auto;    text-align: center;    vertical-align: bottom;}/*.main_menu:first-child {    background: url(../img/menu_left.png) no-repeat;}.main_menu:last-child {    background: url(../img/menu_right.png) no-repeat right;}*/.main_menu a {    text-decoration: none;    display: block;    color: #ffffff;    padding: 11px;}.menu ul ul {    display: none;    position: absolute;    top: 100%;}.sub_menu {    float: none;    position: relative;    background: none;    text-align: left;}.menu ul li:hover > ul {    display: block;}

Edited June 6, 2014 by Namico

[Нарек]

Если уж шаг вправо, шаг влево - расстрел, то конечно лучше использовать картинку целиком, с тенью вместе. Поставите бэкграундом картинку у блока .menu и все. Весить будет максимум 1-2кб если в png сохранить, там 2 цвета всего. И то после оптимизации png останется 600-700b.