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>
        <li><a href="/">Контакты</a></li>
    </ul>
</div> <!--end panel-->
<div id="content">
    Бла-бла-бла
</div>

CSS

#panel {width:100%; float:left; position:relative; z-index:11;}
#panel ul{margin: 0px; } 
#panel li{float:left; position: relative; list-style: none;}

#panel li a{text-decoration:none; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#fff; background:#444; display:block; padding:10px 25px; margin:3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#panel li a:hover{background:#ccc; color:#444;} 

#panel li ul{position: absolute; left:0px; top: 40px;}
#panel li ul li a{background:#ccc; color:#444; }
#panel li ul li a:hover{background:#999; color:#eee;}

body #panel ul li ul {display: none;}

#panel ul li:hover ul, #panel ul li ul:hover {display: block;}
#panel ul li ul {position: absolute; left: 0 px; top: 40px; margin:0; width: 170px; }
#panel ul li ul li{width: 100%; }


#content {clear:both; position: relative;padding:20px;background:#eee; z-index:10;}