JSFiddle - React, Tailwind, and code Playground
HTML
<div id="topmenu">
<ul id="navigation"><li><a href="#" class="select">Компьютеры</a>
<ul>
<li><a href="#">PC настольные смотри тут</a></li>
<li><a href="#">Ноутбуки</a></li>
<li><a href="#">Планштеы</a></li>
</ul>
</li>
<li><a href="#">Мониторы</a></li>
<li><a href="#">Флешки</a></li>
<li><a href="#">Аксессуары</a></li>
<li><a href="#">ИБП</a></li></ul>
</div><!-- закрыли верхнее меню-->
CSS
#topmenu {
width: 950px;
height: 34px;
margin: 0px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#topmenu ul {
float: left;
padding: 0px 0px 0px 36px; z-index: 10;
}
#topmenu ul li {
float: left;
display: block;
position: relative; /*Для правильного отображения псеводоэлементов */
z-index: 1000;
}
#topmenu ul li a {
display: block;
text-decoration: none;
text-transform: uppercase;
text-align:center;
padding: 0 16px;
color: #000;
z-index: 1000;
}
#topmenu ul li a:hover,
#topmenu ul li a.select
{
display: block;
text-decoration: none;
background: #0a9fb0 ;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
z-index: 1000;
}
#navigation li ul {
background: #FFF;
margin-top: -2px;
display: none;
}
#navigation li:hover ul {
display:block;
position:absolute;
z-index: 10;
}
#navigation li ul {
background: rgba(255,255,255,0.5);
padding: 10px 5px;
box-shadow: 5px 5px 25px #000;
-moz-box-shadow: 5px 5px 25px #000;
-webkit-box-shadow: 5px 5px 25px #000;
border-radius: 0px 15px 15px 15px;
-moz-border-radius: 0px 15px 15px 15px;
-webkit-border-radius: 0px 5px 5px 5px;
}
#navigation li ul li a {
background: transparent;
color: #000;
width: 150px;
font-size: 0.95em;
font-weight: normal;
}
#navigation li ul li a:hover { text-decoration: underline;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
...