Temat: Problem z rozsuwanym menu

/*POZIOM 1*/
header ul.menu > li > a { *zoom: 1; border-bottom: 1px dashed rgba(255,255,255,0.3); color: #fff; font-size: 21px; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; white-space: nowrap; }
header ul.menu > li > a:hover, header ul.menu > li:hover > a { border: 0; color: #fff; text-decoration: none; background: {$settings->content_menu_color}; padding: 5px 10px; margin: 0 -10px; }
/*TŁO I WYSOKOŚĆ POZIOMU 1*/
nav { background: url('header.png'); height: 92px; position: relative; z-index: 2; }
/*POZIOMY NIŻSZE*/
/*główna lista kategorii*/
nav .wrapper > ul { margin: 28px 210px 0 0; }
/*pojedyncze elementy listy, np. Artykuły plastyczne*/
nav .wrapper > ul > li { margin-right: 25px; margin-bottom: 5px; position: relative; }
/*WYGLĄD BOX'a DRUGIEGO POZIOMU*/
/*całość drugiego poziomu, główna lista podkategorii*/
nav .wrapper > ul > li > ul { display: none; position: absolute; right: -10px; top: 28px; width: 170px; background: {$settings->content_menu_color}; padding: 8px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; z-index: 1;}
/*wygląd pojedynczego elementu listy drugiego poziomu*/
nav .wrapper > ul > li:hover > ul { display: block; }
nav .wrapper > ul > li > ul li { float: none; }
/*WYGLĄD BOX'a TRZECIEGO POZIOMU*/
nav .wrapper > ul > li > ul > li > ul { display: none; position: relative; left: 170px; width: 170px; background: {$settings->content_menu_color}; padding: 8px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; z-index: 1;}
/*wygląd pojedynczego elementu listy trzeciego pozimu*/
nav .wrapper > ul > li > ul > li:hover > ul { display: block; }
/*WYGLĄD HIPERŁĄCZA*/
nav .wrapper > ul > li > ul a { background: none; padding: 4px; display: block; color: {$settings->nav_link_color}; font-size: {$settings->nav_font_size}; border: 0; text-shadow: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
/*PO NAJECHANIU MUSZKĄ*/
nav .wrapper > ul > li > ul a:hover { background: #444; color: {$settings->nav_link_hover_color}; }
header ul.submenu a { color: #fff; text-decoration: none; }
/*CAŁE MENU*/
nav .wrapper > ul {
position: absolute; top: 10px;
right: 0px;
width: 780px;
margin: 0px;
}

Po najechaniu na hiperłącze w poziomie 2 listy po prawej stronie ukazuje się poziom 3. niestety pokazuje się linię niżej w efekcie czego rozjeżdża mi się też całe menu. Zobrazowałbym to tak:

GŁÓWNA KATEGORIA
KATEGORIA 1
............................ PODKATEGORIA
KATEGORIA 2
KATEGORIA 3

a chciałbym żeby było:
GŁÓWNA KATEGORIA
KATEGORIA 1 PODKATEGORIA
KATEGORIA 2
KATEGORIA 3

Pomoże ktoś?Ten post został edytowany przez Autora dnia 29.08.13 o godzinie 12:33

Temat: Problem z rozsuwanym menu

ok mam ...

wystarczyło dodać linię:
nav .wrapper > ul > li > ul > li {position: relative; }

i zmienić w nav .wrapper > ul > li > ul > li > ul { display: none; position: relative; na absolute :)

Temat: Problem z rozsuwanym menu

I jak to się prezentuje np. na smartfonie?

Temat: Problem z rozsuwanym menu

Tobiasz S.:
I jak to się prezentuje np. na smartfonie?

Oesu Panie Tobiaszu :) ... istnieje rozwiązanie tego zagmatwania ?Ten post został edytowany przez Autora dnia 29.08.13 o godzinie 14:34

Temat: Problem z rozsuwanym menu

mobilna wersja sklepu ... hm

Temat: Problem z rozsuwanym menu

Jakub P.:
mobilna wersja sklepu ... hm

Prędzej czy później i tak Cię to czeka ;) No chyba że chcesz żeby ten sklep się zwinął na 2 lata ;)