CSS - vyreseni kuriozniho pripadu

Zdravim,
pred par dny jsem na internetu nalezl skvele vysouvaci menu, ktere funguje pouze s pomoci CSS a seznamu UL, LI.
Menu je opravdu skvele a tak jsem jej take pouzil, ale pri tom, kdyz jsem jej predelaval pro me potreby do jineho grafickeho vzhledu a pridaval dalsi polozky jsem narazil na celkem dost kuriozni problem.

Kdyz se pokusim pridat vice polozek v hlavni nabidce, od ktere se smerem dolu po najeti kurzoru otevre submenu, tak se mi napriklad delsi nazvy zalomi pod sebe, coz jsem vyresil pridanim znaku   mezi delsi nazvy.

Tim se to sice vyresilo, ale menu se jakoby do sebe scvrklo a prekryva se.
Jednoduse receno nemuzu prijit na zpusob, jak mezi jednotlivymi polozkami v menu udelat dostatecnou mezeru, aby se neprekryvali.

V IE se menu polozky dokonce zarovnaji pod sebe a ve FF se polozky prave prekryvaji a nelze mezi nimi udelat mezera.

Menu naleznete na zkusebni adrese : MENU

CSS ja osobne jakz takz zvladam, ale uz si s timhle hraju asi den vkuse a proste nemuzu na to prijit. Zkousel jsem samozrejme i nastaveni pevne sirky WIDTH a take samozrejme i MARGIN, ale nic nepomohlo. Proto si myslim, ze se jedna o dost kuriozni pripad.

Predem dekuji za vsechny dalsi prispevky a rady.

:) :S :S :S

No to jsem uz take zkousel a ani se to nehne, je to asi zacarovane :o)

Na to jsem pouzil hack _display: inline-block;
nepohne se to a nepohne.... Jestli tomuhle nekdo prijde nekdy na kloub, tak ho navrhnu na Nobelovku :o)
Ja uz vyzkousel stovky moznosti, ale proste nic nepomuze .o(

Zkusil bych místo &nbsp dát css vlastnost white-space: nowrap; zakáže to zalomení textu na další řádek..

Take jsem zkousel... nic nic nic nic... zacarovany kruh .o)

Take jsem zkousel, nic se nezmenilo :o(

Za b) co je jako tohle:
.menu li {
top: expression(isNaN(this.js)?(this.js=1,this.onmouseover=new Function("this.className='hover'"), this.onmouseout =new Function("this.className=''")): 0);
} - v životě jsem to neviděl.. oni snad funguje v CSS JavaScript???

To je misto toho, abych odkazoval na externi soubor hover.itc a takhle se to da bravurne vyresit v CSS pouzitim "expression" od Microsoftu. Tohle ale nijak menu neovlivnuje... kdyz to tam nebude, tak menu ale nepojede.
Jinac stale vidim v tom menu zahadu, proc to nelze roztahnout :o(

_display: inline-block;

podtrzitko je css hack, vlastnost funguje jen v IE. Proste floatovani je v IE cele zabugovane a je nutne zmenit display:block na CSS3 displa:inline-block.

Tak nikdo neví teda jak to vyresit? .o(

A co ty divy? Podle mě to teda kazej ty divy. Jsou tam na nic.

No ty tam byt "musi" ale kdyz se daji pryc, trosku se to v CSS upravi, tak to nic nevyresi (vyzkouseno) .o(

"A co ty divy? Podle mě to teda kazej ty divy."
"No ty tam byt "musi"

Proc by musely, u menu vystavite s ul, li, a

Ok, ale s tim se nic nevyresi, potrebuji pouze nastavit sirku, ktera zahadne nastavit nejde a temi divy to nebude .o)

Nejak jsem z cele debaty nepochopil, co vlastne resite. Ve FF vypada menu stejne jako v IE. Leo

Resime to, jak nastavit hlavnim polozkam menu nahore vlastni sirku, protoze mezi mini nejde udelat zadna vetsi mezera.

Resime to, jak nastavit hlavnim polozkam menu nahore vlastni sirku, protoze mezi mini nejde udelat zadna vetsi mezera.

Nevím proč by to nemělo jít. Šířka se nastavuje pomocí width, položky budou mít display:block a float:left.
Ani nevím, proč by tento příklad měl být nějak kuriozní, je to naprosto normální běžné menu.

No ano, mas pravdu, tem polozkam jsem nastavil :

.menu div {
display: block;
float: left;
width: 100px;
}

Ale polozky se roztahly pouze v IE, to vim, ale ve FF se to roztahle, ale ne od sebe, ale pres sebe, protoze se ve FF cele menu chova, jakoby melo nastavene pevnou sirku.

Rekl bych, ze cely CSS kuriozni priklad je jen preplacany a neprehledny, nic vic. Zacnete od nuly, s logikou a cistou hlavou, Leo


Zacal jsem... dopadl jsem stejne... jel jsem od zacatku, nevim.... proste tam to je uhozene neco s tim hover v javascriptu... asi