Problem mit :hover & display

Guten Tag.
Ich arbeite momentan an einem einfachen Schulprojekt (Mathe-Info, iwie klar. ) & komm bei der Navigationsleiste nicht weiter.
Könnt ihr mal reinschauen und sagen, was das Problem ist & wie ich es lösen kann?

CSS:

Zitat

.menue ul#menue { text-align:center;
list-style-type:none;
float: right;
margin-top: -85px;

}

ul#menue li{
display:inline;
text-align:center;
position:relative;
}
ul#menue li a{
display:inline-block;
}

ul li#hover01 ul#teilnahme {
display: none;
}

#hover01 li:hover {
display: block;
}

ul li#hover01:hover ul#teilnahme{
display: inline;
list-style-type:none;
}

ul#teilnahme {
text-align:center;
list-style-type:none;
float: right;
}

ul#teilnahme li div{
background-color: #000000;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 10px;
border-radius: 10px;
}

Alles anzeigen

HTML:

Zitat

<div class="top-menue"> <div class="container">
<text>2nd Hand Bazar</text><img src="img/header.png"/>
<div class="menue"style="background-color:#000000;">

<ul id="menue" >
<li><a style="background-color:#000000;padding:5px;margin-right: 50px;" href="/"> Home </a></li>
<li><a style="background-color:#000000;padding:5px;margin-right: 50px;" href="we-are.html"> Über Uns </a></li>
<li id="hover01"><a style="background-color:#000000;padding:5px;" href="#"> Teilnahme </a></li>
<ul id="teilnahme">
<li><div><a href="#">Ankauf</a> <br/>
<a href="#">Verkauf</a> </div>
</li>
</ul>

</ul>
</div>
</div>
</div>

Alles anzeigen

Vielen Dank im vor raus.