CSS - menu poziome rozwijane - IE 7 - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - menu poziome rozwijane - IE 7 › CSS - menu poziome rozwijane - IE 7

Path: news-archive.icm.edu.pl!agh.edu.pl!news.agh.edu.pl!newsfeed2.atman.pl!newsfeed.
atman.pl!goblin2!goblin.stu.neva.ru!feeder3.cambriumusenet.nl!feed.tweaknews.nl
!postnews.google.com!9g2000vbq.googlegroups.com!not-for-mail
From: Paweł Kowalczyk <k...@g...com>
Newsgroups: pl.comp.www
Subject: CSS - menu poziome rozwijane - IE 7
Date: Tue, 28 Feb 2012 10:10:32 -0800 (PST)
Organization: http://groups.google.com
Lines: 166
Message-ID: <b...@9...googlegroups.com>
NNTP-Posting-Host: 89.228.66.199
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-2
Content-Transfer-Encoding: quoted-printable
X-Trace: posting.google.com 1330452633 4583 127.0.0.1 (28 Feb 2012 18:10:33 GMT)
X-Complaints-To: g...@g...com
NNTP-Posting-Date: Tue, 28 Feb 2012 18:10:33 +0000 (UTC)
Complaints-To: g...@g...com
Injection-Info: 9g2000vbq.googlegroups.com; posting-host=89.228.66.199;
posting-account=WJwW-goAAACUmMVybeuryDt7Ga4oa-1T
User-Agent: G2/1.0
X-Google-Web-Client: true
X-Google-Header-Order: HUALENKRC
X-HTTP-UserAgent: Mozilla/5.0 (Windows NT 6.1; rv:10.0.2) Gecko/20100101
Firefox/10.0.2,gzip(gfe)
Xref: news-archive.icm.edu.pl pl.comp.www:400647
[ ukryj nagłówki ]
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;
}