brauche Hilfe bei Erstellung eines Menüs mit CSS

R.Carlos · #1 (**permalink**) 11.04.2011, 14:13

Hallo zusammen,
ich habe mit CSS (bin da nicht der Experte darin, aber ich arbeite dran ,-)) ein aufklapbares Menü erstellt.
Das funktioniert soweit auch ganz gut.

Ich habe allerdings noch zwe Sachen die mich stören und ich irgendwie keine Idee habe, wie ich die umsetzen bzw. ändern soll.
Vielleicht hat einer von euch einen Tipp?

Also mein Html sieht so aus. Eigentlich recht simpel...

Code:

 
 
<div id="menu"><!-- öffnet die Menüleiste -->
 
    <ul><!-- öffnet den ersten Themenblock -->
 
        <li><!-- öffnet die Listeneinträge von Thema 1 -->
 
            <h3>Thema 1</h3>
 
                <ul><!-- öffnet die Klappnavi von Thema 1 -->
 
                    <li><a href="#">Thema 1.1</a></li>
                    <li><a href="#">Thema 1.2</a></li>
                    <li><a href="#">Thema 1.3</a></li>
                </ul><!-- schließt die Klappnavi von Thema 1 -->
 
        </li><!-- schließt die Listeneinträge von Thema 1 -->
 
    </ul><!--schließt den ersten Themenblock-->
 
 
 
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3>Thema 2</h3>
 
        <ul><!-- öffnet die Klappnavi von Thema 2 -->
                <li><a href="#">Thema 2.1</a></li>
                <li><a href="#">Thema 2.2</a></li>
                <li><a href="#">Thema 2.3</a></li>
        </ul><!-- schließt die Klappnavi von Thema 2 -->
 
</li><!-- schließt die Listeneinträge von Thema 2 -->
 
</ul><!--schließt den zweiten Themenblock-->
 
<ul><!-- öffnet den dritten Themenblock -->
 
<li><a class="direkt" href="#">Thema 3</a></li>
 
</ul><!--schließt den dritten Themenblock-->
 
<ul><!-- öffnet den vierten Themenblock -->
 
 
<li><a class="direkt" href="#">Thema 4</a></li>
 
</ul><!--schließt den vierten Themenblock-->
 
 
</div><!-- schließt die Menüleiste #menu -->

die passende CSS dazu sieht so aus...

Code:

 
/*--gew&auml;hrleistet einheitliche Abst&auml;nde in unterschiedlichen Browsern--*/
* { margin: 0; padding: 0;}
/*--definiert den Hintergrundbalken der Navi und einige allgem. Angaben--*/
#menu { padding: 0; font-family: Verdana; font-size: 1em; line-height: 1.5; /*--bewirkt eine vertikale Textzentrierung--*/
background-image: url(img.test/img.navi/bg.white.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; position: relative; width: 100%; height: 70px; float: left; margin-top: 50px; /*--nimmt die Navileiste aus dem "Fluss", verhindert float-/clear-Probleme der ul--*/}
/*--definiert die einzelnen Navigationsbl&ouml;cke--*/
#menu ul {float: left; width: 140px; list-style-type: none;}
/*--definiert die Block&uuml;berschriften--*/
#menu h3 { text-align: center; color: #000; font-size: 14px; font-weight: bold; line-height: 25px; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; text-transform: uppercase; height: 33px; }
#menu h3 a { text-align: center; color: purple; font-size: 14px; line-height: 25px; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; text-transform: uppercase; height: 33px; }
#menu h3:hover { text-align: center; color: #000; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 -33px; }
#menu h3:active { text-align: center; color: #000; background-image: url(img.test/img.navi/button.hover.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; }
#menu h3:visited { text-align: center; color: #000; background-image: url(img.test/img.navi/button.hover.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; }
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a { text-decoration: none; display: block; text-align: center; line-height: 25px; background-color: white; height: 30px; }
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover { background: #ebebeb; height: 30px; }
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul { position: absolute; z-index: 2; padding: 0; display: none; }
#menu li { position: relative; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
#menu ul ul li { color: #363636; font-size: 12px; position: relative; width: 300px; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
#menu ul ul li a { color: #363636; line-height: 37px; text-align: left; position: relative; width: auto; height: 37px; float: left; margin: 0; padding: 0 10px; border-right: 1px solid #bbb; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
#menu ul ul li a:hover { color: #363636; background-color: #b2d4ea; text-align: left; position: relative; width: auto; height: 37px; float: left; margin: 0; padding: 0 10px; border-right: 1px solid #bbb; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
 
/*--l&auml;sst die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul { background-color: transparent; top: 33px; display: block; }
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link { font-weight: bold; text-align: center; color: #000; font-size: 14px; line-height: 25px; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 0; text-transform: uppercase; height: 33px; }
#menu a.direkt{ font-weight: bold; text-align: center; color: #000; font-size: 14px; line-height: 25px; background-color: transparent; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 0; text-transform: uppercase; height: 33px; }
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover { background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 -66px; }
#menu a.direkt:active { background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 -66px; }
#menu a.direkt:visited { color: #363636; }
/*--nur f&uuml;r IE-Versionen &lt;=6 erkennbar--*/
* html #menu ul li {float: left; width: 100%;}

mein Problem ist...

1. ich möchte, dass wenn das Untermenü aufgeklappt ist und ich mit der Maus darüber fahre, der Hover Effekt des Hauptmenüpunktes aktiviert bleibt.

2. Dem Hauptmenü hab ich ein Hintergrundbild zugewiesen, welches am unteren Ran eine Spitze richtigung Untermenü zeigt. Wenn das Untermenü aktiviert wird, überdeckt das Menü diese Spitze. Ich möchte aber, dass die Spitze über dem Untermenü liegt um die Zugehörigkeit stärker hervorzuheben.

Hat jemand vielleicht ne idee wo evtl. der Fehler liegt bzw. wie ich das so hinbekomme?
Ich habe es schon mit dem z-Index versucht, aber das geht da irgendwie auch nicht.

Weiß echt nicht mehr weiter.

Vielen Dank schon mal.

zeji · #2 (**permalink**) 11.04.2011, 22:04

1. Da du ja den aktuellen Zustand ermitteln musst, wirst du wohl um eine Javascript-Lösung nicht herumkommen. Damit kannst du deinem Hauptpunkt bei mouseover eine Css-Klasse zuweisen, und bei mouseout wieder löschen.

2. Mir ist nicht so ganz klar geworden, wie du das meinst, aber schau dir mal z-index an.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe bei CSS Desing Umsetzung.	Frosti1986	CSS	7	27.02.2010 13:08
Brauche Hilfe...	steeeefiii	CSS	13	04.09.2009 22:41
absoluter css neuling braucht hilfe wegen bullets	ben2308	CSS	10	02.08.2009 12:45
Brauche Hilfe bei preg_match \| CSS im Newssystem	Zen5656	Serveradministration und serverseitige Scripte	21	19.01.2007 15:33
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04