To jest menu w pełni stworzone w css:
<li><a href="xxx" title="Strona Główna" target="_self" >Strona Główna
</a> <li><a href="xxx" title="Działki i Ceny" target="_self" >Działki i Ceny
</a> <ul class="navigation-2"> <li><a href="xxx" title="Mapka dojazdu" target="_self" >Mapka dojazdu
</a></li> <li><a href="xxx" title="Plan sytuacyjny terenu" target="_self" >Plan sytuacyjny terenu
</a></li> <li><a href="xxx" title="Okolica" target="_self" >Okolica
</a> <ul class="navigation-2"> <li><a href="xxx" title="Sadłogoszcz" target="_self" >Sadłogoszcz
</a></li> <li><a href="xxx" title="Barcin" target="_self" >Barcin
</a></li> <li><a href="xxx" title="Inowrocław" target="_self" >Inowrocław
</a></li> <li><a href="xxx" title="Żnin" target="_self" >Żnin
</a></li> <li><a href="xxx" title="Mogilno" target="_self" >Mogilno
</a></li> <li><a href="xxx" title="Lubostroń" target="_self" >Lubostroń
</a></li> <li><a href="xxx" title="Bydgoszcz" target="_self" >Bydgoszcz
</a></li> <li><a href="xxx" title="Stan prawny" target="_self" >Stan prawny
</a> <ul class="navigation-2"> <li><a href="xxx" title="Warunki zabudowy" target="_self" >Warunki zabudowy
</a></li> <li><a href="xxx" title="Galeria" target="_self" >Galeria
</a> <li><a href="xxx" title="Kontakt" target="_self" >Kontakt
</a> <ul class="navigation-2"> <li><a href="xxx" title="Zadaj pytanie" target="_self" >Zadaj pytanie
</a></li>
Działa w następujący sposób:

Działa ok na IE > 6, Operze, Firefoxie, Chromie.
W IE <= 6 po najechaniu lista się nie rozwija. Jakieś pomysły?
CSS do menu:
#outside{
border:1px solid #777;
background:#777;
}
#navigation-1 {
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:148px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#777;
color:#ffffff;
width:148px;
height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#222;
color:#ffffff;
width:146px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:146px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #777;
border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
}
#navigation-1 li ul.navigation-2 li {
width:146px;
clear:left;
width:146px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#777;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#222;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #777;
border-left:1px solid #777;
background:#ffffff;
z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#777;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#222;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}
Menu pobrane ze strony
www.cssmenumaker.com.
Ten post edytował sadistic_son 19.01.2011, 05:25:27