problema meniu css

[microbu]

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:

View image: index1prod

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 cu 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

[.Breacker]

Vezi sa nu ai 'active' pe valoarea 1 .

PS: Poate te ajuta asta: Quartz Responsive Menu | CSS MenuMaker

[microbu]

poti sa fi mai specific legat de ceea ce mi-ai zis, sunt chiaun deja..

ex. acela are si jQuery.. vreau sa stiu cum pot sa rezolv doar din css acel meniu..

[Pacalici]

body, ul, ol, li {
    margin: 0;
    padding: 0;
}
img {
    border: 0 none;
}
ol, ul, li {
    list-style: none outside none;
}
h1 {
    color: #ed1d24;
    font-family: "Open Sans","Open Sans Extrabold","Open Sans Light","Open Sans Semibold";
    font-size: 20px;
}
body {
    background: url("../img/bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: auto;
    width: 100%;
}
#wrapper {
    background-color: #fff;
    height: auto;
    margin: 0 auto;
    width: 950px;
}
#header {
    height: 225px;
    margin: auto;
    position: relative;
    width: 950px;
}
#logo {
    height: 110px;
    left: 36px;
    position: absolute;
    top: 24px;
    width: 270px;
}
#tel {
    font-family: "Open Sans","Open Sans Extrabold","Open Sans Light","Open Sans Semibold";
    line-height: 40px;
    position: absolute;
    right: 36px;
    text-align: center;
    top: 60px;
    width: 258px;
}
.sunati {
    font-size: 30px;
    font-weight: 700;
}
.tel {
    color: #ed1d24;
    font-size: 40px;
    font-weight: 700;
}
.meniu {
    background-color: #ed1d24;
    font-family: "Open Sans","Open Sans Extrabold","Open Sans Light","Open Sans Semibold";
    font-size: 20px;
    height: 60px;
    left: 36px;
    position: absolute;
    top: 165px;
    width: 878px;
    z-index: 1;
}
.meniu ul {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}
.meniu ul li {
    display: block;
    float: left;
    padding-left: 30px;
    position: relative;
}
.meniu ul li a {
    color: #fff;
    display: block;
    line-height: 30px;
    padding: 15px 10px;
    text-decoration: none;
    white-space: nowrap;
}
.meniu ul li a:hover {
    background-color: #ff494f;
    color: #fff;
    text-decoration: underline;
}
.meniu ul ul {
    display: none;
    position: absolute;
    top: 58px;
}
.meniu ul li:hover > ul {
    display: block;
    text-align: center;
}
.meniu ul ul li {
    float: none;
    padding-left: 0;
    padding-top: 4px;
    position: relative;
    width: auto;
}
.meniu ul ul ul li {
    position: relative;
}
.meniu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
li > a:after {
    content: " »";
}
li > a:only-child:after {
    content: "";
}
#center {
    height: 1280px;
    margin: 34px auto auto;
    position: relative;
    width: 950px;
}
.slide {
    background: url("../img/slideshadow.png") no-repeat scroll -27px 168px rgba(0, 0, 0, 0);
    height: 390px;
    position: absolute;
    width: 950px;
}
.slide img {
    border: 2px solid #ed1d24;
    left: 36px;
    position: absolute;
}
.wrapp {
    height: 350px;
    left: 36px;
    position: absolute;
    top: 385px;
    width: 882px;
}
.box {
    float: left;
    font-family: "Open Sans","Open Sans Extrabold","Open Sans Light","Open Sans Semibold";
    font-size: 16px;
    height: 440px;
    margin-left: 165px;
    width: 180px;
}
.box img {
    border: 8px solid #000;
    border-radius: 50%;
    height: 168px;
    width: 168px;
}
.box span {
    color: #ed1d24;
    display: block;
    font-family: "Open Sans","Open Sans Extrabold","Open Sans Light","Open Sans Semibold";
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 15px;
    text-align: center;
}
.box:first-child {
    margin-left: 0;
}
.box a.hover {
    border: 8px solid #ed1d24;
    border-radius: 50%;
}
.hr {
    background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    border: 0 none;
    color: #5f5f5f;
    height: 2px;
    left: 36px;
    position: absolute;
    top: 960px;
    width: 882px;
}
.noi {
    font-family: "Open Sans","Open Sans Extrabold","Open Sans Light","Open Sans Semibold";
    font-size: 16px;
    height: 200px;
    left: 36px;
    position: absolute;
    top: 1000px;
    width: 882px;
}
.footer {
    height: 80px;
    margin: 0 auto;
    position: relative;
    top: 30px;
    width: 950px;
}
.copy {
    color: #fff;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 15px;
    left: 0;
    position: absolute;
    top: 10px;
}
.copy a {
    color: #fff;
    text-decoration: none;
}

Da copy paste in css-u tau. E facut in firebug, vezi ca ai si cativa selectori de 2 ori, curata un pic dupa. Grija care din declaratii o scoti, cea care e a 2-a de sus in jos e cea valabila.

[bustamante]

vezi ca intre butoane ai o zona libera de 1-2 mm care te scoate afara daca dai cu mouse-ul peste ea. Mareste zonele din css pt hover si iti va merge perfect.

[microbu]

am mers pe alta varianta, care mi s-a parut mai usoara in cazul de fata, am facut un update:

http://designmaniac.comxa.com/cipcos/

ce mai as vrea si nus daca sa apelez la o a 3 clasa, pt subcategoria de produse..

pt o alta marime, sau o merge tot asa dar mai am uitat eu ceva, nu stiu..

ce nu inteleg e de ce nu imi ia fontul pe care l-am utilizat in meniu.. imi baga default si unde e mai mult scris in buton trebuia sa intre unu sub altu (vedeti design-ul mai sus) si daca folosesc <br> mi se face ditamai butonul si cu o gramada de loc intre randuri.

[Pacalici]

Pentru font, vezi cum se cheama Open Sans folosind google fonts. https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

Pentru scris-ul din butoane vezi ca ai css: .meniu_sub unde trebuie sa scoti white-space:nowrap sau sa ii scoti width-ul fix.

[microbu]

Cand am scos white-space:nowrapp apare asa:

View image: nowrapp

Cand ii scot width, apare asa:

View image: nowidth

si nu pot nici sa selectez partea din dreapta..

Edit:

Am sters white-space:nowrapp.. mi se pare ca se apropie cel mai mult pana acu, dar inca mai am spatiu mare intre randuri:

http://designmaniac.comxa.com/cipcos/

Si ms de chestia cu fontu nu stiam..

Edited July 22, 2014 by microbu

[Pacalici]

La butoanele alea de meniu scade line-height ca e prea mare si adauga padding ca sa spatiezi sus si jos la text.

Gen: .meniu_sub li a { font-size:20px;line-height:20px;padding:10px;}

Am dat un exemplu, modifici valori dupa cum crezi ca arata bine.

[microbu]

am pus la .meniu_sub min-width: 140px; /* în loc de width */ si

am pus iar white-space: nowrap;

acu e mai oke, doar ca sunt lungi butoanele care se sparg in dreapta:

http://designmaniac.comxa.com/cipcos/