JSFiddle - React, Tailwind, and code Playground

by g0rkaps

HTML

<ul class="menu">

 <li><a href="#">My dashboard</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>

 <ul>
 <li><a href="#">Documents</a></li>
 <li><a href="#">Messages</a></li>
 <li><a href="#">Sign Out</a></li>
 
 </ul>

 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
 <li><a href="#">Documents</a></li>

</ul> <!-- end .menu -->

CSS

.menu { 
 height: 28px;
 width: 960px;
 background-image: url('http://nevskiycu.ru/menu.png');
 


 -webkit-border-radius: 5px;
}

.menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 29px;
 z-index: 2;
 
}

/* Links */

.menu li a {
 display: block;
 padding: 0 14px;
 
 line-height: 28px;
 text-decoration: none;
 
 border-left: 1px solid #345696;
 border-right: 1px solid #345996;

 
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;

 color: #f3f3f3;
 
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #ffffff; } /*цвет при наведении
/* Sub Menu */

.menu ul {
 position: absolute;
 top: 28px;
 left: 0;

 opacity: 0;
 
 background: #3964ac; 
 border: solid 1px #345996;

 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
 
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;

 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
 
}

.menu li:hover > ul li {
 height: 25px;
 overflow: visible;
 padding: 0;
 
}

.menu ul li a {
 width: 140px;
 padding: 1px 0 1px 1px;
 margin: 0;
 text-indent: 10px;
 border: none;
 line-height: 1.5;
 
}

.menu ul li:last-child a { border: none; }