JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="header">
<div class="nav">
<ul>
<li><a href="#">О ПРОЕКТЕ</a>
</li>
<li id="active"><a href="#">УСЛУГИ</a>
<div id="block_menu">
<ul class="pod_nav1">
<li><a href="#">SEO Pakalpojumi</a>
</li>
<li><a href="#">Izpēte un audits</a>
</li>
<li><a href="#">Mājas lapas optimizācija</a>
</li>
<li><a href="#">Ārējā optimizācija</a>
</li>
<li><a href="#">SEO Speciālisti</a>
</li>
</ul>
<ul class="pod_nav2">
<li><a href="#">SEO Pakalpojumi</a>
</li>
<li><a href="#">Izpēte un audits</a>
</li>
<li><a href="#">Mājas lapas optimizācija</a>
</li>
<li><a href="#">Ārējā optimizācija</a>
</li>
<li><a href="#">SEO Speciālisti</a>
</li>
</ul>
<ul class="pod_nav3">
<li><a href="#">SEO Pakalpojumi</a>
</li>
<li><a href="#">Izpēte un audits</a>
</li>
<li><a href="#">Mājas lapas optimizācija</a>
</li>
<li><a href="#">Ārējā optimizācija</a>
</li>
<li><a href="#">SEO Speciālisti</a>
</li>
...
CSS
html, body {
margin:0;
padding:0;
text-align: center;
background:#000;
}
@font-face {
font-family:Pompadur;
src:url(fonts/Times New Roman Cyr Regular.ttf);
}
@font-face {
font-family:COPRGTB;
src:url(fonts/COPRGTB.ttf);
}
#header {
width:1100px;
margin:0 auto;
padding:0;
}
#active {
width:70px;
}
#block_menu {
margin:0;
padding:0;
width:600px;
}
/* Начало описания верхнего меню сайта. */
.nav {
margin:0;
padding:0;
width:973px;
height:25px;
float:left;
background:#51284f;
border-radius:0px 0px 5px 5px;
}
.nav ul {
margin:0px;
padding:0px;
list-style:none;
position:relative;
}
.nav li {
float:left;
}
.nav ul li a {
padding:0;
padding-top:6px;
padding-bottom:3px;
margin:0px 8px;
color:#fff;
text-decoration:none;
display:block;
font-family:Pompadur;
font-size:12px;
}
.nav ul li a:hover {
padding:0;
padding-top:4px;
padding-bottom:3px;
margin:0px 8px;
border-top:2px solid #fff;
}
.nav ul li ul li a:hover {
border:0;
padding:6px 0px;
margin:0px 8px;
}
.nav ul li ul li a {
padding:6px 0px;
margin:0px 8px;
color:#000;
}
.pod_nav1 {
background:#fff;
width:149px;
margin-top:0px;
padding-left:0px;
position:absolute;
display:none;
border-left:1px solid #000;
border-bottom:1px solid #000;
border-radius:0 0 0 5px;
float:left;
}
.pod_nav2 {
background:#fff;
width:150px;
margin-top:0px;
margin-left:150px;
position:absolute;
display:none;
border-bottom:1px solid #000;
float:left;
}
.pod_nav3 {
background:#fff;
width:150px;
margin-top:0px;
margin-left:300px;
position:absolute;
display:none;
border-bottom:1px solid #000;
float:left;
}
.pod_nav4 {
background:#fff;
width:149px;
margin-top:0px;
margin-left:450px;
position:absolute;
display:none;
border-right:1px solid...
JavaScript
$(document).ready(function () {
$("li").click(function () {
$(this).children().children().toggle();
});
});