o a:hover özelliğini bunla ypaabilirsin ama açılır menüyü nasıl yapılrı bilmiyorum
HTML KOD:

<ul class="menu">
<a href="index.html">Ana Sayfa </a>
<a href="hakkimizda.html">Hakkımızda</a>
<a href="urunler.html">Ürünler</a>
</ul>

CSS KOD

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #D7D7D7;
    width:8em;
    padding: .2em .8em;
    text-decoration: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
}

ul.menu a:hover
{
    background-color: #ebf9cf;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
}

açılır mneüyü bilmiyorum
renk uyumunu background-color: #D7D7D7; değiştirebilirsin