✔ Listen + menü + display none/block

[Devil/hes]

Guden an alle die das hier lesen.
Also mein Problem ist folgendermaßen. Ich bin kein Pro in CSS und beschäftige mich jetzt durch die Arbeit verstärkt damit. Ich wollte eigentlich ein ganz normales Menü machen will aber nichts vorgefertigtes nehmen -> lerneffekt.

Naja so siehts im moment aus:
HTML

<div id="obenmenu">
<a href="#">Zuhause</a>

<ul class="test">
	<li>Testspalte</li>
	<li>Testspalte</li>
</ul>

<a href="#">Home</a>
<a href="#">Daheim</a>
<a href="#">Weg</a>
</div>

CSS:

#obenmenu 
	
		{
			margin-left:490px;
			margin-top:30px;
			word-spacing:20px;
			font-weight:bold;
		}

#obenmenu a
	
		{
			color:#FFFFFF;
			margin-top:30px;
			text-decoration:none;
		}



#obenmenu a:hover
	
		{
			color:#FFFFFF;
			margin-top:30px;
			word-spacing:20px;
			font-weight:bold;
			border-bottom:3px solid white;
		}
		
#obenmenu a:hover .test
	
		{
			display:block;
		}
		
#obenmenu .test

		{
			display:none;
			width:100px;
			background-color:#FFFFFF;
			border:1px solid black;
			color:red;
			float:left;
			font-weight:200;
		}

Sobald ich oben über einen link geh möcht ich eben mein menü mit .test einblenden...kann mir jemand erklären was ich falsch mache?

Danke für jegliche Antworten
P.S. Sry wegen der miesen Rechtschreibung

 

[Maik]

Hi,

hierfür musst du mit einer verschachtelten Liste arbeiten:

<div id="obenmenu">
     <ul>
         <li><a href="#">Zuhause</a>
                <ul class="test">
                    <li>Testspalte</li>
                    <li>Testspalte</li>
                </ul>
         </li>
         <li><a href="#">Home</a></li>
         <li><a href="#">Daheim</a></li>
         <li><a href="#">Weg</a></li>
     </ul>
</div>

Die erforderlichen Änderungen und Ergänzungen im Stylesheet lauten:

#obenmenu

                {
                        margin-left:490px;
                        margin-top:30px;
                        word-spacing:20px;
                        font-weight:bold;
                }
#obenmenu ul {
                        margin:0;
                        padding:0;
                        list-style:none;
                }

#obenmenu li {
                        display:inline;
                 }

#obenmenu a

                {
                        color:#FFFFFF;
                        margin-top:30px;
                        text-decoration:none;
                }



#obenmenu a:hover

                {
                        color:#FFFFFF;
                        margin-top:30px;
                        word-spacing:20px;
                        font-weight:bold;
                        border-bottom:3px solid white;
                }

#obenmenu li:hover > ul.test

                {
                        display:block;
                }

#obenmenu .test

                {
                        display:none;
                        width:100px;
                        background-color:#FFFFFF;
                        border:1px solid black;
                        color:red;
                        float:left;
                        font-weight:200;
                }

Falls du das Dropdown-Menü im IE6 zum Laufen bringen möchtest, wäre zusätzlich Javascript erforderlich, da er die allgemeine Pseudoklasse li:hover sowie den Kindselektor ">" nicht unterstützt - siehe hierzu http://www.htmldog.com/articles/suckerfish/

 

[Devil/hes]

Vielen Dank das war die Lösung ich versuch das jetzt noch nachzuvollziehen damit ich das nächste mal nicht wieder dumm dastehe