Dropdown - CSS Problem

[AukeArts]

Guten Tag zusammen,
in Mediengestaltung ist es unsere Aufgabe, eine Homepage für eine Apotheke zu gestalten. Momentan hänge ich jedoch an dem Dropdown Menü feste. Ich möchte ein Tab Dropdown Menü machen, aber da gibt es ein Problem. Seht selbst.



Ich habe im moment keine Ahnung was ich falsch gemacht habe..kommt auch vllt. daher dass ich CSS noch nicht komplett verstanden habe

Also, was muss ich ändern um mein Ziel zu erreichen ? Wenn es geht, bitte nur "tipps" damit ich selber tüfteln kann

@import url("mainPage.css");
#navbar {
    width:660px;
    margin-left:20px;
    padding-top:55px;
    }

#navbar #holder {
    height:45px;
    width:630px;
    border-bottom:1px solid #CCC;
    padding-left:20px;
    }


#navbar #holder ul {
    list-style:none;
    margin:0;
    padding:0;
}

#navbar #holder ul li a {
    text-decoration:none;
    float:left;
    margin:5px;
    font-family:verdana,geneva,arial,helvetica,sans-serif;
    font-weight:bold;
    font-size:14px;
    color:#000;
    border:1px solid #999;
    border-bottom:none;
    padding:10px;
    width:80px;
    text-align:center;
    display:block;
    background:url(../Template/navbar/menu_bg.gif);
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    }

#navbar #holder ul li a:hover{
    background:url(../Template/navbar/menu_bg_hover.gif);
    text-color:#333;
    }
    
#holder ul li a#onlink {
    background:#FFF;
    color:#000;
    border-bottom: 1px solid #FFF
}

#holder ul li a#onlink:hover {
    background:#FFF;
    text-color:#000;
}

li ul {
    display: none;
    position: absolute; 
    top: 1em;
    left: 0;
  }
  
li:hover ul {
    display: block; 
    }

<div id="navbar">
    <div id="holder">
  <ul>
        
        
        
        
        <li><a href="#" >Home</a></li>
        
        
        
        <li><a href="#">Apotheke</a></li>
        
        
        
        <li><a href="#">Service</a>
        <ul>
        <li><a href="#">Service</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Service</a></li>
        </ul>
        </li>
        
        
        
        <li><a href="#" id="onlink">Kontakt</a>  
        
        </ul> <!-- end main ul -->
    </div> <!-- end holder -->
  </div> <!-- end navbar -->

Mit freundlichen Grüßen,
AukeArts

 

[cebito]

AW: Dropdown - CSS Problem

Erstmal musst die li positionieren, damit sich die untergeordnete ul an denen ausrichtet... (position:relative; )

 

[AukeArts]

AW: Dropdown - CSS Problem

Dankeschön
Es hat soweit geklappt. Jetzt muss ich es nur noch etwas optimieren.



Mit freundlichen Grüßen,
AukeArts

MfG

 

[simonpicos]

AW: Dropdown - CSS Problem

Ich würde ja gerne schaen, allerdings: 404