I just started with html and css and stumpled across a problem i cant solve i got a menu with white text and black background
one of the menu points is also a dropdown. On hover the dropdown menu appears. It has white background and black text but i didnt found a way to change the
color of the original menu point from white to black if the dropdown menu is active

It would be greate help if someone would help me with the problem.

i know the page looks kind of crapy but its just a try for testing my dropdown menu

This is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>
<link href="Extendet Dropdown.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menu" >
<ul class="menu-item">
<li><a href="Try 2.html">Link to try 2</a>
</li>
<li><a href="Try 2.html">First Dropdown</a>
<ul>
<li><a href="Try 2.html">Link to try 2</a>
</li>
<li><a href="Try 2.html">Link to try 2</a>
</li>
<li><a href="Try 2.html">Link to try 2</a>
</li>
</ul>
</li>
<li>Back in time
</li>
<li>NO LINK
</li>
</ul>
</div>
<div id="textbox">
</div>
</body>
</html>



This is the css

html {
background: -webkit-radial-gradient(white, black);
height: 1080;
padding-top: 20px;
padding-bottom: 20px;


}

#menu {
display: block;
width: 965px;
height: 150px;
border:none; /* border = rand */
background-color: black;
margin: auto;
border-radius: 3px;
}

#textbox {
display: block;
border:none;
border-radius: 3px;
margin: auto;
width: 960px;
height: 350px;
background-color: white;
margin-top: 20px;
}

ul.menu-item a {
display:block;
color: white;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}

ul.menu-item ul li a { /* die links des drop downs sind schwarz statt weis wie im die links im menu-item */
display:block;
color: black;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}

ul.menu-item {
list-style: none;
padding: 0;
display:block;
color: black;
font-family: Verdana;
font-size: 14px;
text-decoration: none;

}

/*ul.menu-item { position: relative; z-index: 597; float: left; } keine sichtbare Funktion*/

ul.menu-item li {
float: left;
line-height: 24px;
vertical-align: middle; zoom: 1;
width: 231px;
height: 24px;
margin: 119px 0px 0px 7px;
text-align: center;
background-color:black;
color: white;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
border-radius:3px;
border: 1px solid;
border-color: black;
}

ul.menu-item li:hover { /*hover funktion für die boxen ganz oben*/
position: relative;
cursor: default;
background-color: white;
color: #FF6C00;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border: 1px solid;
border-color: #FF6C00;
-webkit-transition: color 0.5s ease;
}

ul.menu-item li:hover > li a{
color: black;
}

ul.menu-item ul { /*einstellung für das dropdown kästchen*/
visibility: hidden;
position: relative;
top: 100%;
left: 0;
width: 191px;
z-index: 580;
margin: -25px 0px 0px -1px;
background-color: white;
list-style: none;
border-bottom-left-radius:3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-top: none;

}

ul.menu-item ul li { /*einstellung für die Liste des Dropddownkästchens */
float: none;
background: white;
text-align: center;
line-height: 24px;
width: 150px;
height: 24px;
margin: 0px 0px 0px 0px;
border: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: 1px solid;
border-color: black;

}


ul.menu-item ul li:hover{ /* notwendig, da sonst die unter Kante der Dropdown liste beim hover auch abflacht */
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
border-top: 1px solid;
border-color: black;
}

ul.menu-item li:hover > ul {
visibility: visible;
border-color: #FF6C00;
color: black;
}

ul.menu-item a:hover {
color: #FF6C00; /* color */
text-decoration: none; /* eliminates underline */
-webkit-transition: color 0.5s ease;
}


Thank you for trying to help