Udało się - problem rozwiązany - w kodzie, który wkleiłeś brakowało “float: left;” dla loga:)
Teraz wszystko gra tak jak należy.
Jeszcze raz duże dzięki za pomoc.
No patrz, nie dałem float’a jak zobaczyłem, że logo wyświetla się tam gdzie trzeba 
(może to dla tego, że zastosowałem html5… :-k )
Jeszcze jeden problem mi się pojawił: na Operze menu działa prawidłowo, ale na IE niestety nie. Nie rozwija się, ani nawet nie podświetla. Masz pomysł jak temu zaradzić?
– Dodane 09.04.2013 (Wt) 11:20 –
Chyba wiem, dlaczego pojawił mi się ten problem: zaraz pod menu jest baner swf i wygląda tak, jakby to menu rozwijało się pod banerem a nie na nim. Tylko teraz pytanie: jak to wyeliminować? Dziwne, bo pod Operą działa prawidłowo.
Spróbuj:
- dla obiektu flash’owego dodać
lub
oraz (dla pewności ;)) nadać wyższy “z-index” dla menu, niż dla obiektu flash.
Chciałem jeszcze raz wrócić do tematu…
W chwili obecnej posiadam coś takiego:
CSS:
#container {
width: 800px;
margin: 0 auto;
}
#nav {
width: 800px;
height: 53px;
background-color: #ccc;
}
.logo img {
padding: 6px;
float: left;
border: none;
}
#menu {
float: right;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
text-align: center;
background: #ccc;
color: #000;
border: 1px solid #ccc;
padding: 15px 15px;
white-space: nowrap;
}
ul li a:hover {
color: #fff;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
width: 160px;
}
.pseudo-tabela {
width: 800px;
}
i html:
AAAAA
BBBBB
CCCCC
EEEEE
FFFFF
DDDDD
No i wszystko działa jak należy, ale muszę wprowadzić jedną modyfikację: chciałbym, żeby pozycja EEEEE (i FFFFF) “rozwijały” się na 4 dodatkowe pozycje, a dokładniej: po najechaniu myszką na EEEEE z prawej strony wyskakują dodatkowe odsyłacze ułożone pionowo jeden pod drugim (np. SSSSS, TTTTT, YYYYY, ZZZZZ).
Już raz uzyskałem efektywną pomoc i mam nadzieję, że uda mi się i teraz:)
Z góry dzięki.
Css:
#container {
width: 800px;
margin: 0 auto;
}
#nav {
width: 800px;
height: 53px;
background-color: #ccc;
}
.logo img {
padding: 6px;
float: left;
border: none;
}
#menu {
float: right;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
ul ul ul {
top:0;
left:100%;
}
#menu li ul, #menu li:hover ul ul, #menu li li:hover ul ul, #menu li li li:hover ul ul, #menu li li li li:hover ul ul {
display: none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {
display: block;
position: absolute;
}
li a {
display: block;
text-decoration: none;
text-align: center;
background: #ccc;
color: #000;
border: 1px solid #ccc;
padding: 15px 15px;
white-space: nowrap;
}
#menu a:hover {
color: #fff;
cursor: pointer;
}
li:hover li {
float: none;
font-size: 11px;
width: 160px;
}
.pseudo-tabela {
width: 800px;
}
Html:
- AAAAA
- BBBBB
-
CCCCC
-
EEEEE
- EEEEE 1
- EEEEE 2
- EEEEE 3
- EEEEE 4
-
FFFFF
- FFFFF 1
- FFFFF 2
- FFFFF 3
- FFFFF 4
-
- DDDDD
[/code]
Tak jak pisałem, wszystko działa.
Jedną “usterkę” chciałbym jeszcze tylko wyeliminować: kilka postów wcześniej doradziłeś mi, żeby dodać dla obiektu flash’owego dodatkową linijkę, żeby menu nie rozwijało się “pod” tego właśnie wstawionego flash-a (w Operze działało prawidłowo, a IE i Chrom nie działaly). Po dodaniu tej linijki, menu rozwija się jak powinno, ale nie ma ładnie porozdzielanych poszczególnych pól (tak jak było to w Operze przed dodaniem tej linijki), a są tylko jakby całe bloki nieporozdzielane.
Niby wielkiej tragedii nie ma, ale efekt estetyczny jest duuużo korzystniejszy, kiedy poszczególne elementy rozwijanego menu są fajnie oddzielane przezroczystą kreską…
Damy radę poradzić temu?
Dodaj do css’a:
ul li ul a {margin-bottom: 1px;}
albo
ul li ul a {border-bottom: 1px solid rgba(0,0,0,.1);}
W obu przypadkach będzie uwidoczniony podział dla elementów rozwiniętych (na dole każdego obiektu). Chyba że z kodu wytniesz istniejące deklaracje:
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
Są określone dla ul li… w skrócie, usuwasz je stamtąd i dajesz do css’a:
ul li ul a {
border-bottom: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
}
lub słowo “border” zamieniasz na “margin” i oczywiście nie dopisujesz “solid rgba(0,0,0,.1)”.
Już pierwsze rozwiązanie daje wizualny efekt taki jak chciałem.
Ale… znowu tylko pod Operą działa to menu prawidłowo, a pod IE przy przechodzeniu pomiędzy poszczególnymi pozycjami (przyciskami) menu, trzeba szybko “przejeżdzać” myszką na kolejny element, bo inaczej, przy normalnym poruszaniu myszką menu się zamyka (coś jakby trafiać w pustą przestrzeń pomiędzy elementami).
Chyba coś, czego nie ma w powyższym kodzie, powoduje ten problem, ponieważ sprawdziłem przed chwilą w IE i menu mi nie znika. Spróbuj może z border’em (nie będzie to ten sam efekt, ale…).
//Edit
Sprawdź poniższe:
#container {
width: 800px;
margin: 0 auto;
}
#nav {
width: 800px;
height: 53px;
background-color: #ccc;
}
.logo img {
padding: 6px;
float: left;
border: none;
}
#menu {
float: right;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
ul ul ul {
top:0;
left:100%;
}
#menu li ul, #menu li:hover ul ul, #menu li li:hover ul ul, #menu li li li:hover ul ul, #menu li li li li:hover ul ul {
display: none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {
display: block;
position: absolute;
}
li a {
display: block;
text-decoration: none;
text-align: center;
background: #ccc;
color: #000;
padding: 16px;
white-space: nowrap;
}
#menu ul li {
padding-bottom:1px;
padding-right:1px;
}
/*ul li ul a {padding: 10px;}*/
#menu a:hover {
color: #fff;
cursor: pointer;
}
li:hover li {
float: none;
font-size: 11px;
width: 160px;
}
.pseudo-tabela {
width: 800px;
}
PS. ul li ul a {padding: 10px;} w komentarzu jest na zmniejszenie wielkości wpisów w menu, może się przyda…
Niestety dalej to samo: pod Operą działa, pod IE: po rozwinięciu Menu i w czasie “chodzenia” po nim gubi się. Trzeba biegać:)
Żeby “sprawiedliwości stało się zadość” ;), problem z IE został rozwiązany przez dodanie “background-color” i występuje gdy pod rozwiniętym menu jest obiekt flash’owy, a elementy menu nie stykają się ze sobą…
#menu ul li {
background-color: rgba(0, 0, 0, 0.1);
padding-bottom: 1px;
padding-right: 1px;
}