JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/articles/">Статьи</a>
        <ul>
                <li><a href="">Фотообзоры</a></li>
                <li><a href="">Авто и девушки</a></li>
                <li><a href="">Автовыставки</a></li>
        </ul>
</li>
</ul>

</div> <!--end panel-->
<div class="cont">
    бла-бла
</div>

CSS

div#panel {width:100%; border-top: 1px solid #000; border-bottom: 1px solid #000; float:left;}
        div#panel ul{margin: 0 0 0 40px; font-size:13px; font-weight: bold; letter-spacing: 2px;} 
        div#panel li{float:left; position: relative; padding: 8px 0; list-style-type: none; border-right: 1px solid #444;}
                div#panel li:first-child{border-left: 1px solid #444;}
                div#panel li:hover{background:url(images/shablon_14.jpg) #F60; }
        div#panel a{text-decoration: none;  font-size:.9em; color: #FC3; padding: 11px 25px; margin: 0em;}
                div#panel a:link{text-decoration: none; font-weight: bold;}
                div#panel a:hover{text-decoration: none; color: #000; font-weight: bold;}
body div#panel ul li ul {display: none;}
//div#panel ul li:hover ul, div#panel ul li ul:hover {display: block;}
div#panel ul li ul {position: absolute; left: -1px; top: 35px; margin:0; width: 170px; }
div#panel ul li ul li{width: 100%;  border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333;}
div#panel ul li ul li:first-child{border-top: 1px solid #333;}
.cont {position:relative;clear:both;}