Probleme meniu css

Salut, am o problema legata de un meniu si nu stiu cum sa o dau la capat…
Design-ul la meniu cand e spart, arata cam asa:
http://postimg.org/image/84jc6413t/

Am urcat aici ceea ce am facut pana acum: http://designmaniac.comxa.com/cipcos/
Problema ar fi ca nu imi ramane activ drop down-ul mereu si habar nu am dc si la categoria secundara la tigle cand ma duc mouse-ul pe deasupra se sparge dar la fel nu pot sa selectez produsele secundare.
Html-ul este oke din ceea ce am vazut dar ma bate css-ul…
Astept sugestii/pareri…
Ms

la o prima vedere (nu m-am uitat pe cod, n-am facut teste, pur si simplu m-am jucat putin) s-ar putea sa pierzi hoverul din cauza pozitionarii.

am facut astfel de test si e la fel… plus ca imi mai trebuie si o modalitate in care sa am tab-urile acelea mai proportionate cumva, daca s-ar putea cumva sa apara ca in design…

Pentru pozitionare:

  • Vezi padding-top la .meniu ul li:hover > ul si top la .meniu ul ul.
  • Vezi margin-bottom la .meniu ul ul li.
  • Iar la submeniul de nivel 2, vezi left la .meniu ul ul ul li.

Daca vrei separatorul transparent, pune bg rosu pe a, nu pe li.

Eu mereu foloseam http://www.htmldog.com/articles/suckerfish/dropdowns/

Ce faci greșit:

  1. nu ai position:relative la .meniu ul li (poți avea LI în cadrul meniului și în afara unui ul? Probabil un selector de forma .meniu li e mai potrivit)
  • .meniu ul ul ăsta este poziționat absolut la părinte (nu la modul position:absolute ci la modul top:58px). Recomand o poziționare relativă (idem și pentru submeniu): top:99% sau left:99%
  • elementele ultimului nivel le poziționezi cu top și left

Încearcă următoarea abordare. Pentru mark-up folosești următoarea structură:

<div class="meniu">
  <ul class="meniu__main">
    <li><a href="#">meniu1</a></li>
    <li><a href="#">meniu2</a>
    <div class="meniu__sub">
      <ul>
        <li><a href="#">submeniu 1</a></li>
        <li><a href="#">submeniu 2</a>
          <div class="meniu__sub">
            <ul>
              <li><a href="#">submeniu 1</a></li>
              <li><a href="#">submeniu 2</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    </li>
    <li><a href="#">meniu3</a></li>
    <li><a href="#">meniu4</a></li>
  </ul>
</div>

De ce?

  • abordează problema în maniera BEM. Asta înseamnă că nu vei mai avea selectori de forma .meniu ul ul ul li sau .meniu ul li:hover > ul ci doar :hover > .meniu__sub sau maxim .meniu__sub :hover > .meniu__sub;
  • div-ul meniu__sub îți permite un padding extra pentru a evita frustrarea utilizatorului când meniul dispare la cea mai mică mișcare în afara sa (iar la un meniu cu două niveluri chestia asta va fi extrem de enervantă!).

demo

Da, imi place metoda ta, acum o pun in aplicare si revin cu update… sper sa ajung la ideea din design. Ms mult

Probabil n-ai control asupra designului, dar ca sa stii pe viitor, meniurile cu mai mult de 1 level adancime sunt ‘a big no no’ dpdv al UX. Lumea se descurca foparte foarte greu cu ele.

Ce vrei sa spui prin “Probabil n-ai control asupra designului”?

Că nu tu ești designerul sau cel care decide cum vor arăta chestiile în pagină.

design-ul este facut de mine… doar ca nu ma gandeam ca un drop down de acest fel poate sa imi dea batai de cap atata, nu este prima data cand fac un meniu drop down… dar prima data se spargea doar odata.

Edit: am urmat sfatul tau si am ajuns aici:

Si avand mult spatiu intre randuri pt scrisul din butoane aveam la .meniu_sub: white-space:nowrap si width.
Am zis sa scot ori nowrapp ori width-ul acela.
Cand am scos white-space:nowrapp apare asa:
http://postimg.org/image/kvnht52ft/

Cand ii scot width, apare asa:
http://postimg.org/image/nxg7dq3tv/
si nu pot nici sa selectez partea din dreapta…

asa ca am sters white-space:nowrapp-ul… mi se pare ca se apropie cel mai mult pana acu, dar inca mai am spatiu mare intre randuri, vedeti mai sus update-ul.

Ai spațiu mare între rânduri pentru că ai line-height: 60px; la .meniu. Poți pune un line-height mai mic, iar apoi să centrezi vertical (pentru că ăsta cred că e motivul acelui line-height de 60px), folosind padding la .meniu a.

Scoate height de la .meniu_sub

Nu are height, .meniu_sub

La momentul la care am lăsat comentariul avea :smile:

Ai de făcut următoarele:

.meniu_sub {
  position: absolute;
  left: -9999px;
  top: 54px;
  min-width: 140px; /* în loc de width */
  padding: 6px;
  text-align: center;
  white-space: nowrap; /* eviți ruperea textului pe un rând nou*/
}

Spațierea pare ok.

dap, este mai bine… dar cand se sparge in dreapta, sunt prea late butoanele.
cum fac sa fie textu acela pe 2 randuri?
http://postimg.org/image/84jc6413t/

sa apelez la o a 3 clasa, pt drop down-ul al doilea, cu modelele de produs?

Am refacut iar… am pus width fix (cum aveam 140px) si white-space normal. Si am folosit padding,yea… Ms

Ca este vb tot de site-ul respectiv, mai am o intrebare si ca sa nu deschid alt top, sper ca este oke sa postez tot aici…
Intrebarea este legata de cele 3 categorii de tigla de pe mijloc, unde sunt pozele acelea pe rotund:

Intre border si poze se vede un spatiu alb si nu stiu de la ce este? Ele sunt taiate pe rotund din photoshop… cand le pun layer cu alta culoare pe fundal nu se vede nici un spatiu alb…
Daca aveam doar un layer care continea doar imaginea… il faceam pe acela rotund din css si imaginea o lasam normala gen… in cazul acela nu cred`ca se mai vedea albul… dar aici am un div care contine mai multe si na…
Ce e de facut, ca nus de la ce ar putea sa fie?

M-am uitat doar la poza 1 si 2 si la amandoua ai un spatiu de jur imprejur de 1px.

Taie elementele pana unde incepe culoarea, nu lasa zona aia pe transparent.

Urca noile poze si vezi daca iti mai apare spatiul ala alb.

Adauga un background de aceeasi culoare cu border-ul la box img.

.box img {    
    background: none repeat scroll 0 0 black;    
    border: 8px solid #000;    
    border-radius: 50%;    
    height: 168px;    
    width: 168px;
}

@GeorgeG: am văzut că se practică foarte mult înșiruirea de atribute la background (nu doar la tine). Ai vreun motiv pentru care exită none repeat scroll 0 0 ?