Single level down drop Menü

[sergej59]

Hallo,
ich habe vor aus meinem normalen Menü ein
vertikales downdrop Menü zu machen, nun
jetzt habe ich so viele stunden rumgelesen, aber iwi
bin ich trotzdem zu dum und evrstehe nicht ganz wie
ich das hinbekomme, probiert habe ich es, leider
funktioniert es ncith ganz richtig.

Das Menü

<ul id="navigation">
       <li><a href="index.html" target="_self">Test 1</a>
       <ul><li><a href="index.html" target="_self">Test 1-1</a></li>
           <li><a href="index.html" target="_self">Test 1-2</a></li> </ul>
       </li>
       
       <li><a href="impressum.html"target="_self" >Test 2</a></li>
       <li><a href="aboutme.html" target="_self">Test 3</a></li>
       <li><a href="test.html" target="_self">Test 4</a></li>
</ul>

Dazugehöriges CSS

/*Navigationsmenü*/

ul#navigation{
list-style-type:none;
margin-top:30px;
margin-left:0px;
padding-left:0px;
text-align:center;
}

ul#navigation li{
padding-left: 15px;
margin-bottom:4px;}


ul#navigation li a{
    color:#FFF;
    background-image:url(design/button.png);
    border-right:double #CCC;
    display:block;
    width:160px;
    height:30px;
    text-decoration: none;

}

ul#navigation li a:hover{
    color:#900;
    font-weight: bold;
    background-image:url(design/buttonover.png);
    border-right:double #900;
    text-decoration: none;
}

/* LEVEL 1 */

ul#navigation ul{
    list-style-type:none;
    text-align:center;
}

ul#Navigation ul li a {
    width:90px;
    height:20px;
    background-color:#666;
    position: absolute;
    top: 20px; left: -10px;
    display: none;}
    
ul#Navigation  ul li a:hover {
    display: block; }

So sieht es jetzt aus :
http://sergej59.bplaced.net/test/index.html

So sollte es aussehen :
http://sergej59.bplaced.net/test/test.PNG

Wäre nett, wenn mir jemand helfen würde :)

 

[Ishmael]

Du blendest die untergeordneten Listen ja nicht wirklich aus.
Allgemein sind Drop-Downs ne haarige Angelegenheit auch aus sicht der Nutzerfreundlichkeit/Zugänglichkeit und weil die IEs da nich ganz ohne Probleme mit eingebunden werden.

Schau dich mal bei CSS-Play um:
Stu Nicholls | CSSplay | CSS only menus

Dort gibt es viele Drop-Downs. Das Prinzip ist aber oft sehr ähnlich, ob nun horizontal oder vertikal.

 

[sergej59]

Du blendest die untergeordneten Listen ja nicht wirklich aus.
Allgemein sind Drop-Downs ne haarige Angelegenheit auch aus sicht der Nutzerfreundlichkeit/Zugänglichkeit und weil die IEs da nich ganz ohne Probleme mit eingebunden werden.

Schau dich mal bei CSS-Play um:
Stu Nicholls | CSSplay | CSS only menus

Dort gibt es viele Drop-Downs. Das Prinzip ist aber oft sehr ähnlich, ob nun horizontal oder vertikal.

Danke, habe mir auf der von dir genannten Seite einiges angeschaut, jedoch scheit mir das bischen zu viel, die verweden meistens mehrere level.

Ich jedoch krige es immer noch nicht hin mein CSS Code so anzupassen, dass es richtig funktioniert , könnte mir jemand vllt mit dem Menü helfen ?

 

[Bernhard]

Danke, habe mir auf der von dir genannten Seite einiges angeschaut, jedoch scheit mir das bischen zu viel, die verweden meistens mehrere level.

Ich jedoch krige es immer noch nicht hin mein CSS Code so anzupassen, dass es richtig funktioniert , könnte mir jemand vllt mit dem Menü helfen ?

Hallo Sergej,

schau mal hier, vielleicht hilft Dir das weiter: http://www.html.de/html-und-xhtml/23668-drop-down-men-funktioniert-nicht-wie-es-sollte.html

Grüße
Bernhard