Kai.S
Threadersteller
Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht: 
|
Verfasst Do 30.08.2007 16:01
Titel [solved] Problem mit verschachtelter Listennavigation |
  |
|
Hey Leute ich brauche mal eure Hilfe, bin am verzweifeln.
Ich habe den IE's <7 per behavior das :hover auf für <ul> Tags beigebracht und nun eine nette Navi gebaut.
Allerdings habe ich das Problem, dass im IE <7 die ul li's entweder aufgezogen werden, sobald die ul li ul sichtbar wird,
oder wenn ich overflow:hidden anwede der Inhalt abgeschnitten wird.
Wie kann ich also die ul li ul einblenden, ohne dass mir der IE automatisch die ul li streckt?
| Code: | <div id="nav-bar">
<ul>
<li id="mm-nav"><a href="#mm">Multimedia</a>
<ul>
<li><a href="#au">Audio</a></li>
<li><a href="#v">Video</a></li>
<li><a href="#2d">2D/3D Visualisierungen</a></li>
</ul>
</li>
<li id="web-nav"><a href="#web">Web</a>
<ul>
<li><a href="#design">Interface und Webbdesign</a></li>
<li><a href="#om">Online-Marketing</a></li>
<li><a href="#shops">Webshops/E-Commerce</a></li>
<li><a href="#hosting">Web-Hosting</a></li>
</ul>
</li>
<li id="sw-nav"><a href="#software">Software</a>
<ul>
<li><a href="#intellitools">Intellitools</a></li>
<li><a href="#api">Schnittstellen-<br />programmierung</a></li>
<li><a href="#ae">Anwendungsentwicklung</a></li>
<li><a href="#dialog">DiaLog Newslettertool</a></li>
</ul>
</li>
<li id="about-nav"><a href="#about">Über uns</a>
<ul>
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#punkt">Noch ein Punkt</a></li>
</ul>
</li>
<li id="kontakt-nav"><a href="#kontakt">Kontakt</a></li>
<li id="referenzen-nav"><a href="#referenzen">Referenzen</a></li>
<li id="news-nav"><a href="#news">News</a></li>
<li id="impressum-nav"><a href="#impressum">Impressum</a></li>
<br class="clear" />
</ul>
</div> |
und das Stylesheet
| Code: | /* BOF:Navigation */
/* Listen */
/* Erste Ebene */
#nav-bar ul li#mm-nav {
/* Als erstes Element */
margin-left:10px;
}
#nav-bar ul {
position:absolute;
z-index:100;
}
/* FÜR ALLE */
#nav-bar ul li#mm-nav,#nav-bar ul li#web-nav,#nav-bar ul li#sw-nav,#nav-bar ul li#about-nav,#nav-bar ul li#kontakt-nav,#nav-bar ul li#referenzen-nav,#nav-bar ul li#news-nav,#nav-bar ul li#impressum-nav {
background:url(../gfx/nav-link.gif) top left no-repeat;
}
#nav-bar ul li {
position: relative;
z-index:200;
float: left;
}
/* Zweite Ebene */
#nav-bar ul li ul {
background:#f1f1f1;
display:block;
/* opacitiy - maybe not valid?! */
filter:alpha(opacity=92);
-moz-opacity:0.92;
opacity:0.92;
position:relative;
width:160px;
left:-10px;
top:-4px;
padding-bottom:5px;
overflow:visible;
}
#nav-bar ul li ul li {
display:block;
float:none;
margin:5px 5px 5px 20px;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
overflow:visible;
}
/* Anker */
/* Links: Erste Ebene */
#nav-bar ul li a {
display:block;
height:38px;
line-height:38px;
text-decoration:none;
font-weight:bold;
text-align:center;
}
#nav-bar ul li a:link {
background:url(../gfx/nav-link.gif) top left no-repeat;
}
#nav-bar ul li a:visited {
background:url(../gfx/nav-link.gif) top left no-repeat;
}
#nav-bar ul li a:hover {
background:url(../gfx/nav-over.gif) top left no-repeat;
}
#nav-bar ul li a:active {
background:url(../gfx/nav-over.gif) top left no-repeat;
}
/* Links: Zweite Ebene */
#nav-bar ul li ul li a {
font-weight:normal;
display:block;
text-align:left;
height:auto;
line-height:1.2em;
padding:5px;
width:120px;
}
#nav-bar ul li ul li a:link {
background:none;
border:hidden;
}
#nav-bar ul li ul li a:visited {
background:none;
border:hidden;
}
#nav-bar ul li ul li a:hover {
background:#fff;
/*border:1px solid #fff;*/
}
#nav-bar ul li ul li a:active {
background:#fff;
/*border:1px solid #fff;*/
}
/* Feste Breiten wegen Floats */
#nav-bar ul li#mm-nav {
width:100px;
}
#nav-bar ul li#web-nav {
width:60px;
}
#nav-bar ul li#sw-nav {
width:80px;
}
#nav-bar ul li#about-nav {
width:80px;
}
#nav-bar ul li#kontakt-nav {
width:70px;
}
#nav-bar ul li#referenzen-nav {
width:90px;
}
#nav-bar ul li#news-nav {
width:60px;
}
#nav-bar ul li#impressum-nav {
width:90px;
}
/* Alle ausblenden */
#nav-bar ul li#mm-nav ul,#nav-bar ul li#web-nav ul,#nav-bar ul li#sw-nav ul,#nav-bar ul li#about-nav ul,#nav-bar ul li#kontakt-nav ul,#nav-bar ul li#referenzen-nav ul,#nav-bar ul li#news-nav ul,#nav-bar ul li#impressum-nav ul {
margin-left:-3000px;
}
#nav-bar ul li#mm-nav:link ul,#nav-bar ul li#web-nav:link ul,#nav-bar ul li#sw-nav:link ul,#nav-bar ul li#about-nav:link ul,#nav-bar ul li#kontakt-nav:link ul,#nav-bar ul li#referenzen-nav:link ul,#nav-bar ul li#news-nav:link ul,#nav-bar ul li#impressum-nav:link ul {
margin-left:-3000px;
}
#nav-bar ul li#mm-nav:visited ul,#nav-bar ul li#web-nav:visited ul,#nav-bar ul li#sw-nav:visited ul,#nav-bar ul li#about-nav:visited ul,#nav-bar ul li#kontakt-nav:visited ul,#nav-bar ul li#referenzen-nav:visited ul,#nav-bar ul li#news-nav:visited ul,#nav-bar ul li#impressum-nav:visited ul {
margin-left:-3000px;
}
#nav-bar ul li#mm-nav:hover ul,#nav-bar ul li#web-nav:hover ul,#nav-bar ul li#sw-nav:hover ul,#nav-bar ul li#about-nav:hover ul,#nav-bar ul li#kontakt-nav:hover ul,#nav-bar ul li#referenzen-nav:hover ul,#nav-bar ul li#news-nav:hover ul,#nav-bar ul li#impressum-nav:hover ul {
margin-left:0px;
}
#nav-bar ul li#mm-nav:active ul,#nav-bar ul li#web-nav:active ul,#nav-bar ul li#sw-nav:active ul,#nav-bar ul li#about-nav:active ul,#nav-bar ul li#kontakt-nav:active ul,#nav-bar ul li#referenzen-nav:active ul,#nav-bar ul li#news-nav:active ul,#nav-bar ul li#impressum-nav:active ul {
margin-left:0px;
}
/* EOF:Navigation */ |
das Ausblenden hab ich mit margin-left:-3000px gemacht,
display:none; hat aber den selben Effekt
und bei visibiliy:hidden; sind die ul li's auch ohne :hover schon so breit.
Zuletzt bearbeitet von Kai.S am Sa 01.09.2007 19:29, insgesamt 2-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
