JSFiddle - React, Tailwind, and code Playground

HTML

<div id='topwrapper'>
<div id='topnav'>
<ul id='top'>
<li><a href='/'>Κεντρική</a></li>
<li><a class='trigger' href='#'>TEXT WITH DROPDOWN</a>
    <ul>
        <li><a href='#'>DROPDOWN1</a>
            <ul>
              <li><a href='#'>LIST1OF DROPDOWN1</a></li>
              <li><a href='#'>LIST2OF DROPDOWN1</a></li>
              <li><a href='#'>LIST3OF DROPDOWN1</a></li>
            </ul>
        </li>
        <li><a href='#'>DROPDOWN2</a></li>
    </ul>
</li>
<li><a href='#'>NO DROP</a></li>
<li><a href='#'>NO DROP</a></li>
<li><a href='#'>NO DROP</a></li>
</ul>
<br class='clearit'/>
</div>
    <div style='clear:both;'></div></div>

CSS

#topnav{width:960px;height:25px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:open sans;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 15px open sans;text-transform:none;color:#e3e4e4;border-right:1px solid #f6672e;border-left:1px solid #852601;padding:4px 12px 6px}
#top li:first-child a { border-left: none; }
#top li:last-child a {border-right: none; }
#top a.trigger{background-image:url(http://2.bp.blogspot.com/-RrMNxJ-LHEM/T0EGCniEi9I/AAAAAAAAFXI/PgTFPfKHsqM/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:4px 24px 6px 12px}
#top li{float:left;position:relative;width:auto}

#top li ul {width:170px;position:absolute}
#top ul li a{text-align:left;color:#000;font-size:12px;font-weight:400;text-transform:none;font-family:open sans;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=87);-moz-opacity:.87;opacity:.87}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#fff;color:#000;text-decoration:underline}

#top li:hover ul,#top li.hvr ul{display:block}

#top li:hover ul a,#top li.hvr ul a{color:#aaa;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#111!important;color:#e3e4e4!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px open sans;color:#772201;display:block;line-height:16px;text-transform:uppercase}
#top li:hover a span,#top li:hover a.arrow span{color:#eaeaea} 

#top li ul li:hover ul {display:block}

#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px...