Hi there, since you are hosted at WordPress.com on the Premium Plan, the best place to get help would be at WordPress.com. You have access to Live Chat, and you can also post in the WordPress.com forums, such as in the CSS Customization forum.
First off, remove the !important
from this custom CSS rule as it is overriding the menu stuff. !important should only be used in rare cases since it can affect trying to change other things.
a {
color:#ffb6c1;
}
Then add the following and you can adjust the colors as desired. I used the pink you are using elsewhere on your site.
.main-navigation ul ul {
background-color: #FFB6C1;
}
@media screen and (min-width: 768px) {
.main-navigation ul ul a, .main-navigation ul ul a:visited {
color: #fff;
}
}
button.menu-toggle {
border-color: #FFB6C1;
color: #FFB6C1;
}
button.menu-toggle:hover {
border-color: #dd9999;
color: #dd9999;
}
@media screen and (max-width: 767px) {
.main-navigation.toggled li li a {
color: #fff;
}
}