JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="horiz">
     <li><a href="$HOME_PAGE_LINK$"><img src="/devmedia/_images/media/logoheader.png" title="Developers — Информационный портал для разработчиков" style="width:39px;heigth:39px;"/></a></li>
 <li>
     <a href="/load">Файлы</a>
     <ul>
         <li><a href="">Дополнительный пункт</a></li>
         <li><a href="">Пункт 1</a></li>
         <li><a href="">Пункт 2</a></li>
         <li><a href="">Пункт 3</a></li>
     </ul>
 </li>
 <li><a href="/publ">Статьи</a></li>
 <li><a href="/forum">Форум</a></li>
 </ul>

CSS

.horiz{width:1000px;height:40px;margin:auto;padding:0px;list-style:none;}
 .horiz > li{float:left;height:40px;border-bottom:1px solid #2e4a5b; position: relative;}
 .horiz > li> a:hover{background:url(/devmedia/_images/grad/headerbackgroundpnglihover.png) #3b5469}
 .horiz > li > a{text-shadow:#273f4d 1px 1px 0;font-size:18px;color:#ccdcee;display:block;line-height:40px;min-width:auto;width:auto;text-align:center;text-decoration:none;padding:0 5px 0 5px;}

 .horiz > li ul {
     position: absolute;
    left: 0;
    top: 100%;
    display: none;
 }

 .horiz > li:hover ul {
     display: block;
 }

.horiz > li ul li {
   background: #ff0000;
    padding: 5px 10px;
}

.horiz > li ul li a {
    color: #fff;
}