Parantatatam
mag Cookies & Kekse
Hallo,
ich bastle gerade an einer Menüleiste, welche sich beim Überfahren mit der Maus ausklappen soll. Soweit geht es auch schon. Ich will jetzt aber noch, dass es in diesen Untermenüs ebenfalls die Möglichkeit Verweise so zu markieren, dass man dort wieder ein Untermenü ausklappen kann. Dazu habe ich mich dem Beispiel von SelfHTML.org bedient.
Hier sind meine Ergebnisse, die ich bisher habe:
Im Anhang sind zwei Bilder: ist.jpg zeigt die Situation, wie es jetzt aussieht (Ausschnitt) und soll.jpg zeigt, wie es sein sollte (da gibt es aber immer noch ein Problem, da das Untermenü auf der gleichen Höhe beginnen sollte wie der Menüpunkt, der links gelb unterlegt ist): wenn man über einen Menüpunkt, dann soll das Untermenü angezeigt werden.
ich bastle gerade an einer Menüleiste, welche sich beim Überfahren mit der Maus ausklappen soll. Soweit geht es auch schon. Ich will jetzt aber noch, dass es in diesen Untermenüs ebenfalls die Möglichkeit Verweise so zu markieren, dass man dort wieder ein Untermenü ausklappen kann. Dazu habe ich mich dem Beispiel von SelfHTML.org bedient.
Hier sind meine Ergebnisse, die ich bisher habe:
CSS:
div#menu {
width: 975px; /* 47.1em */
margin: 5px;
border: 2px solid #DBD400;
background-color: #EBEE98;
}
* html div#menu { /* Korrektur fuer IE 5.x */
width: 48.7em; /* 48.7em : Wie muss der Wert hier aussehen? */
w\idth: 975px; /* 47.1em */
}
div#menu div {
clear: left;
}
ul#menubar {
margin: 0;
padding: 0;
text-align: center;
}
ul#menubar li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0;
padding: 0;
}
* html ul#menubar li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#menubar li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#menubar li ul {
margin: 0;
padding: 0;
position: absolute;
top: 1.6em;
left: -0.4em;
display: none; /* Unternavigation ausblenden */
text-align: center;
}
* html ul#menubar li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#menubar ul { /* Workaround fuer den IE 7 */
padding-bottom:0.4em;
}
ul#menubar li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#menubar li ul li {
float: none;
display: block;
margin-bottom: 0;
margin-left: 5px
}
ul#menubar a {
display: block;
width: 195px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 0;
text-decoration: none;
color: #C20A12;
}
* html ul#menubar a {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 195px; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#menubar a:hover {
border-color: white;
background-color: #D3D000;
}
a.submenu {
background: url("http://images.dntm.de/arrow.gif") no-repeat right;
}
a.submenu:hover ul {
display: block;
margin-top: -5px;
}
ul.submenu li a {
margin-left: 195px;
margin-top: 0px;
display: none;
}
HTML:
<!-- Start: Menu -->
<div id="menu" class="clearfix">
<ul id="menubar">
<li><a href="/Main">Start</a>
<ul>
<li><a href="/Main">Startseite</a></li>
<li><a href="/About:DnTm" class="submenu">DnTm.DE</a>
<ul class="submenu">
<li><a href="/About:DnTm">Was ist DnTm.DE?</a></li>
<li><a href="/About:Stats">Statistik</a></li>
<li><a href="/About:Ads">Bei uns werben</a></li>
</ul>
</li>
<li><a href="/About:Dampfer" class="submenu">Dampfer.NET</a>
<ul class="submenu">
<li><a href="/About:Dampfer">Was ist Dampfer.NET?</a></li>
<li><a href="/Campaign:Partner">Partnercrews</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/Apply">Bewerben</a>
<ul>
<li><a href="/Apply">Bewerben</a></li>
<li><a href="/Apply:Chance">Gewinnchance</a></li>
<li><a href="/Apply:Jury" class="submenu">Jury</a>
<ul class="submenu">
<li><a href="/Apply:Jury">Mitglieder</a></li>
<li><a href="/Apply:Criteria">Kriterien</a></li>
<li><a href="/Apply:Points">Punktesystem</a></li>
</ul>
</li>
<li><a href="/Apply:Category">Kategorien</a></li>
</ul>
</li>
<li><a href="/Campaign">Monatsaktionen</a>
<ul>
<li><a href="/Campaign:Participate">Teilnehmen</a></li>
<li><a href="/Campaign:Winner">Gewinner</a></li>
<li><a href="/Campaign">Aktionen</a></li>
<li><a href="/Campaign:Partner">Partnercrews</a></li>
</ul>
</li>
<li><a href="/Model">Topmodels</a>
<ul>
<li><a href="/Model:Top3">Besten drei</a></li>
<li><a href="/Model:Top10Female">Top 10 Mädels</a></li>
<li><a href="/Model:Top10Male">Top 10 Jungs</a></li>
<li><a href="/Model:History">"History"</a></li>
</ul>
</li>
<li><a href="/DnTm">DnTm</a>
<ul>
<li><a href="/DnTm:VisitorBook">Gästebuch</a></li>
<li><a href="/DnTm:Forum">Forum</a></li>
<li><a href="/DnTm:Help">Hilfe</a></li>
</ul>
</li>
</ul>
</div>
<!-- End: Menu -->
Im Anhang sind zwei Bilder: ist.jpg zeigt die Situation, wie es jetzt aussieht (Ausschnitt) und soll.jpg zeigt, wie es sein sollte (da gibt es aber immer noch ein Problem, da das Untermenü auf der gleichen Höhe beginnen sollte wie der Menüpunkt, der links gelb unterlegt ist): wenn man über einen Menüpunkt, dann soll das Untermenü angezeigt werden.