Czy tak proste menu w CSS nie działa

http://rexx.hekko.pl/menu/

HTML
<ul id="navi" class="dropdown dropdown-horizontal">

<li><a href="#">Aktualności</a>
<ul>
<li><a href="#">Polska</a></li>
<li><a href="#">Świat</a></li>
</ul>
</li>
<li><a href="#">Tutoriale</a>

<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Fotografie</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>

<li><a href="#">Inspiracje</a>
<ul>
<li><a href="#">ikony</a></li>
<li><a href="#">strony</a></li>
</ul>
</li>
</ul>

CSS

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}




#navi {
font-family: Verdana, Geneva, sans-serif;

}

#navi li a {
display:block;
color:#000;
text-decoration:none;

padding:10px 20px;
}

#navi li a:hover,#navi li a.hover {
background:#00ccff;
}

#navi li ul {

}

#navi li li a {
width:150px;
border:0;

}

#navi li li a:hover {
background:#7b7b7b;
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

do góry

On 28 Lut, 19:10, Paweł Kowalczyk <k...@g...com> wrote:
> Czy tak proste menu w CSS nie dzia?a
>
> http://rexx.hekko.pl/menu/
>
> HTML
> <ul id="navi" class="dropdown dropdown-horizontal">
>
>         <li><a href="#">Aktualno?ci</a>
>                 <ul>
>                         <li><a href="#">Polska</a></li>
>                         <li><a href="#">?wiat</a></li>
>                 </ul>
>         </li>
>         <li><a href="#">Tutoriale</a>
>
>                 <ul>
>                         <li><a href="#">Webdesign</a></li>
>                         <li><a href="#">Css</a></li>
>                         <li><a href="#">Fotografie</a></li>
>                         <li><a href="#">jquery</a></li>
>                 </ul>
>         </li>
>
>         <li><a href="#">Inspiracje</a>
>                 <ul>
>                         <li><a href="#">ikony</a></li>
>                         <li><a href="#">strony</a></li>
>                 </ul>
>         </li>
> </ul>
>
> CSS
>
> ul.dropdown,
> ul.dropdown li,
> ul.dropdown ul {
>  list-style: none;
>  margin: 0;
>  padding: 0;
>
> }
>
> ul.dropdown {
>  position: relative;
>  z-index: 597;
>  float: left;
>
> }
>
> ul.dropdown li {
>  float: left;
>  line-height: 1.3em;
>  vertical-align: middle;
>  zoom: 1;
>
> }
>
> ul.dropdown li.hover,
> ul.dropdown li:hover {
>  position: relative;
>  z-index: 599;
>  cursor: default;
>
> }
>
> ul.dropdown ul {
>  visibility: hidden;
>  position: absolute;
>  top: 100%;
>  left: 0;
>  z-index: 598;
>  width: 100%;
>
> }
>
> ul.dropdown ul li {
>  float: none;
>
> }
>
> ul.dropdown ul ul {
>  top: 1px;
>  left: 99%;
>
> }
>
> ul.dropdown li:hover > ul {
>  visibility: visible;
>
> }
>
> #navi {
>         font-family: Verdana, Geneva, sans-serif;
>
> }
>
> #navi li a {
>         display:block;
>         color:#000;
>         text-decoration:none;
>
>         padding:10px 20px;
>
> }
>
> #navi li a:hover,#navi li a.hover  {
>         background:#00ccff;
>
> }
>
> #navi li ul {
>
> }
>
> #navi li li a {
>         width:150px;
>         border:0;
>
> }
>
> #navi li li a:hover {
>         background:#7b7b7b;
>
> }
>
> ul.dropdown,
> ul.dropdown li,
> ul.dropdown ul {
>  list-style: none;
>  margin: 0;
>  padding: 0;
>
> }
>
> ul.dropdown {
>  position: relative;
>  z-index: 597;
>  float: left;
>
> }
>
> ul.dropdown li {
>  float: left;
>  line-height: 1.3em;
>  vertical-align: middle;
>  zoom: 1;
>
> }
>
> ul.dropdown li.hover,
> ul.dropdown li:hover {
>  position: relative;
>  z-index: 599;
>  cursor: default;
>
> }
>
> ul.dropdown ul {
>  visibility: hidden;
>  position: absolute;
>  top: 100%;
>  left: 0;
>  z-index: 598;
>  width: 100%;
>
> }
>
> ul.dropdown ul li {
>  float: none;
>
> }
>
> ul.dropdown ul ul {
>  top: 1px;
>  left: 99%;
>
> }
>
> ul.dropdown li:hover > ul {
>  visibility: visible;
>
>
>
>
>
>
>
> }

Oczywiscie nei działa pod IE7 lub IE6

do góry

Dnia Tue, 28 Feb 2012 10:10:32 -0800 (PST), Paweł Kowalczyk napisał(a):

> Czy tak proste menu w CSS nie działa

Dlatego:
> ul.dropdown li:hover {

IE6 nie miał hoverów dla innych elementów niż <a>, w IE7 powinno zadziałać
gdybyś dał doctype strict (o ile dobrze pamiętam a nie mam pod ręką żeby
sprawdzić).

Rozwiązanie: użyj hoverów dla <a>

--
Tomek

do góry

On 28 Lut, 21:40, Tomasz Sowa <t...@t...NOSPAM.org> wrote:
> Dnia Tue, 28 Feb 2012 10:10:32 -0800 (PST), Paweł Kowalczyk napisał(a):
>
> > Czy tak proste menu w CSS nie działa
>
> Dlatego:
>
> > ul.dropdown li:hover {
>
> IE6 nie miał hoverów dla innych elementów niż <a>, w IE7 powinno zadziałać
> gdybyś dał doctype strict (o ile dobrze pamiętam a nie mam pod ręką żeby
> sprawdzić).
>
> Rozwiązanie: użyj hoverów dla <a>
>
> --
> Tomek

Zmiana doctype'a na strict nie pomogła
Znalazłem rozwiązanie http://www.webtechwise.com/fix-ie7-submenu-hover-pro
blem/
I działa :)

Dzięki za naprowadzenie

do góry