Prob bei Dropdown Menü!

[Real_Point]

Ich versuche noch schon seit gestern verzweifelt ein Dropdown Menü auf meiner neuen Portfolio aufzubauen. Allerdings will CSS mal wieder nicht so wie ich will.

1. Der Hovereffekt des Buttons ist weg.
2. Das Dropdown ist nicht senkrecht darunter.

Hier mal wie es aussieht:



Eig sollten die 3 Sub-Buttons alle unter WORKS stehen...
Hier mal mein Code:

<div id="navi">
    <ul>
        <li id="button-1"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></li>
        <li id="button-2"><a href="index.html"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></a></li>
        <li id="button-3"><img class="spacer" src="images/spacer.gif" alt="Spacer" />
            <ul class="dropdown">
                <li id="button-7"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></a></li>
                <li id="button-8"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></a></li>
                <li id="button-9"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></a></li>
            </ul>
            </li>
        <li id="button-4"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></a></li>
        <li id="button-5"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></a></li>
        <li id="button-6"><img class="spacer" src="images/spacer.gif" alt="Spacer" /></li>
    </ul>
</div>

/* NAVIGATION */

#navi {
height: 78px;
display: block;
float: left;
position: relative; top: 0px;
}

#navi ul {
list-style-type: none;
width: 1000px;
margin: 0;
padding: 0;
}

#navi ul li {
display: block;
float: left;
margin: 0;
padding: 0;
height: 78px;
}

.spacer { 
border: 0px; 
width: 100%;
height: 100%; 
}

#button-1 {
width: 452px;
background-image: url(images/navi_1.jpg);
background-repeat: no-repeat;
}

#button-2 {
width: 100px;
background-image: url(images/navi_2_a.jpg);
background-repeat: no-repeat;
}

#button-2:hover {
background-image: url(images/navi_2.jpg);
background-repeat: no-repeat;
}

#button-3 {
width: 100px;
background-image: url(images/navi_3_a.jpg);
background-repeat: no-repeat;
}

#button-3:hover .dropdown {
background-image: url(images/navi_3.jpg);
background-repeat: no-repeat;
display: inline;
position: absolute;
z-index: 2;
margin-left: 1px;
}

#button-3:hover .dropdown li{
display: inline;
background-color: #00FF00;
list-style-position: outside;
}

#button-4 {
width: 100px;
background-image: url(images/navi_4_a.jpg);
background-repeat: no-repeat;
}

#button-4:hover {
background-image: url(images/navi_4.jpg);
background-repeat: no-repeat;
}

#button-5 {
width: 100px;
background-image: url(images/navi_5_a.jpg);
background-repeat: no-repeat;
}

#button-5:hover {
background-image: url(images/navi_5.jpg);
background-repeat: no-repeat;
}

#button-6 {
width: 148px;
background-image: url(images/navi_6.jpg);
background-repeat: no-repeat;
}

#button-7 {
width: 98px;
height: 29px;
background-image: url(images/navi_7_b.jpg);
background-repeat: no-repeat;
}

#button-8 {
width: 98px;
height: 29px;
background-image: url(images/navi_8_b.jpg);
background-repeat: no-repeat;
}

#button-9 {
width: 98px;
height: 29px;
background-image: url(images/navi_9_b.jpg);
background-repeat: no-repeat;
}

.dropdown {
display: none;
position: absolute; top: 74px; left: 550px;
height: 87px;
}

hoffe ihr könnt mir helfen :'(

 

[d0xId]

AW: Prob bei Dropdown Menü!

Dein Fehler kann ich leider nicht finden..aber ich kann dir ein funktionierendes Dropdown als code geben.

HTML Code:
<div id="menu">
<ul id="navi">
<li><a href="Menülink.html">Menülink</a>
<ul>
<li><a href="Dropdown1.html">Dropdown1</a></li>
<li><a href="Dropdown2.html">Dropdown2</a></li>
<li><a href="Dropdown3.html">Dropdown3</a></li>
<li><a href="Dropdown4.html">Dropdown4</a></li>
</ul>
</li>
</ul>
</div>

CSS Code:
#menu{
position:absolute;
left: 12px;
top:7px;
height:25px;
width:8em;
z-index: 100000;
}
#navi, #navi ul {
list-style-type:none;
margin:0;
padding:0;
}
#navi li {
width:8em;
float:left;
}
#navi li ul {
display:none;
}
#navi li:hover ul {
display:block;
}
#menu a{
text-decoration:none;
list-style-type:none;
display:block;
float:left;
width:8.3em;
font-weight:bold;
text-align:center;
height: 1.3em;
}
#menu a:link, #menu a:visited{
background-color: #dec79a;
color: #513913;
border: 1px solid;
}
#menu a:hover{
background-color: #660000;
color: #fff;
border: 1px #513913 solid;
}


Hoffe es hilft dir weiter.

 

[Real_Point]

AW: Prob bei Dropdown Menü!

Nicht wirklich...
Habe nun immerhin den Hovereffekt von WORKS wiederherstellen können.

Hat jmd vllt ne Idee warum die 3 Buttons nicht unter einander stehen?