اشکال در منوی افقی

سلام دوستان. وقت بخیر. من یه برنامه دارم که دو تا منو داره. نوار بار افقی و عمودی. برای هر کدوم شون کلاس و آیدی متفاوت تعریف کردم اما متاسفانه بعضی جاها مثل تعریف لینک از یک ویژگی استفاده می کنن. ( با اینکه جداگونه براشون قابلیت تعریف کردم. مشکل اصلی کدم اینجا قسمت css هست. چطوری میتونم تغییرش بدم؟ کد html  رو هم اضافه میکنم.

<ul class="firstmenu">
    <li><a href="#cv1">رزومه</a></li>
    <div id="cv1" class="modalDialog">
      <div>
        <a href="#Close" title="Close" class="Close">X</a>
        رزومه
      </div>
    </div>
</ul>

کد css:

.firstmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(20,30,250,0.5);
    font-family: "B Nazanin";
    direction: rtl;
    font-size: 20px;
}

.firstmenu a:hover {

    background-color: aqua;
    transition: all 0.5s;
}
.firstmenu li {
    float: right;

}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    direction: rtl;
    transition: all 1s;

}

اشکال در قسمت آخر کد css هست یعنی این بخش:li a, .dropbtn.

چطور میتونم طور دیگه ای پیاده سازیش کنم؟ ویژگی های کلاس مدال هم از روی این برداشته شده متاسفانه