CSS-Menü anpassen

[Html]

Hallo zusammen, ich bin's mal wieder...

Also habe eben entschieden das ich mir ein DropDown Menü in meine Homepage einbaue.
Hab mal etwas gesucht und bin auf http://www.cssplay.co.uk/menus/final_drop.html
fündig geworden.

Nur leider habe ich da jetzt ein paar Probleme bei dem Anpassen an meine Homepage.
Also, folgendes ich bräuchte dieses Menü mit:


-Menü soll ganz oben links beginnen
-Überschrift soll kein Link sein, sondern eben nur als Überschrift der Menüpunkte dienen
-Breite der Überschrift 9em, Höhe 18px
-Menüunterpunkte selbe Höhe und Breite, sollen bündig unter der Überschrift erscheinen

-weitere Überschrift, wiederrum als Link aber ohne Unterpunkte

Vielleicht kann mir dabei jemand helfen und mir evt. die einzelnen Code-Teile in der css-datei kommentieren für was diese sind.

 /* common styling */
.menu {
font-family: verdana, sans-serif; 
width:750px; 
position:relative; 
font-size:0.85em;
z-index:100;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#000; 
width:139px; 
height:3em; 
color:#000; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#dfc184; 
padding-left:10px; 
line-height:3em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
w\idth:139px;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;
}

/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#fff; 
background:#bd8d5e;
}

.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:3em;
margin-top:1px;
left:0; 
width:150px;
}
* html .menu ul li a:hover ul {
margin-top:0;
marg\in-top:1px;
}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; 
position:absolute; 
height:0; 
width:0;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background:#faeec7; 
color:#000; 
height:auto; 
line-height:1.2em; 
padding:5px 10px; 
width:129px
}
* html .menu ul li a:hover ul li a {
width:150px;
w\idth:129px;
}

.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#c9c9a7; 
color:#000;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:150px; 
top:0;
width:150px;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}

mfg,Olli

 

[Maik]

Was hälst Du davon, Deine Wunschliste durch etwas Eigeninitiative und Ausprobieren / Experimentieren selber abzuarbeiten?

 

[Html]

Ja, das ist eine gute Idee. Das versuche ich auch schon, nur ist das Problem das ich manchmal nicht weiß was ich ändere und wieder was ändere und irgendwann funktioniert gar nichts mehr. Könntest du mir denn vielleicht einige Kommentare zu den css-code abschnitten schreiben. Damit ich ungefähr weis, wo und was ich ändern muss?

mfg,Olli

 

[Maik]

Wenn ich jetzt das Stylesheet nach den relevanten Stellen durchsuche, um Dir in den entsprechenden Zeilen einen Kommentar zu hinterlegen, könnte ich es auch gleich editieren, aber der Lerneffekt wäre für Dich gleich null.

Nimm Dir also mal 'ne Stunde Zeit, und arbeite Dich einfach in den Code ein

 

[Html]

Hallo, hab jetzt mal etwas probiert nur habe ich immer noch nicht gefunden wo die Breite der Unterpunkte im Firefox eingestellt werden.

Und was soll folgendes:

* html .menu ul li a:hover ul li a {
width:110px;
w\idth:100px;           
}

Ach und im IE verschwindet der ganze Hintergrund auf kompletter Länge obwohl nur ein Menüpunkt vorhanden ist.


mfg,Olli

 

[Maik]

Die Breite der Untermenüs kannst Du hier einstellen:

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background:#faeec7; 
color:#000; 
height:auto; 
line-height:1.2em; 
padding:5px 10px; 
width:129px;
}
* html .menu ul li a:hover ul li a {
width:150px;
w\idth:129px;
}

Zudem mußt Du auch hier die entsprechenden Werte setzen:

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:150px;
top:0;
width:150px;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}

Der von Dir gezeigte Code-Ausschnitt ist der "Star-HTML-Hack" und dient als CSS-Browserweiche für den IE unter Windows. Die erste Breitenangabe ist für den IE 5 / 5.5 gedacht, da er das Boxmodell nicht unterstützt, und den Innenabstand zur Breite nicht hinzuaddiert. Die zweite width-Angabe ist der Tan-Hack, und ist für den IE 6 gedacht, der das Boxmodell wiederum richtig interpretiert.

Siehe hierzu auch Cascading Style Sheets { Tutorials : CSS-Hacks am Box-Modell }.