<html>
<head>
<style>
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
height: 100%;
margin: 0;
background-color: #121212;
color: #bfbfbf;
}
#container {
width: 1220px;
margin: 0 auto;
text-align: center;
margin-top: 100px;
}
#main {
margin: 0;
padding: 0;
}
#main li {
display: inline-block;
}
#main li a {
background: rgba(255, 255, 255, 0.04);
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
padding: 9px 25px;
border-radius: 2px 2px 0px 0px;
font-weight: bold;
display: block;
position: relative;
text-align: center;
text-decoration: none;
}
#main li a:hover {
background: #000000;
color: #ffffff;
}
#main-1,
#main-2,
#main-3 {
background: #000;
margin: 0;
padding: 0;
}
#main-1 li,
#main-2 li,
#main-3 li {
display: inline-block;
}
#main-1 li a,
#main-2 li a,
#main-3 li a{
display: block;
position: relative;
text-align: center;
text-decoration: none;
font-size: 13px;
padding: 12px 18px 8px;
color: rgba(53,60,65,0.6);
}
#open-main-1:hover #main-1 {
display: block;
}
#open-main-2:hover #main-2 {
display: block;
}
#main-1,
#main-2,
#main-3 {
display: none;
}
#open-main-1:hover #main-1 {display: block;}
#open-main-2:hover #main-2 {display: block;}
#open-main-3:hover #main-3 {display: block;}
</style>
</head>
<body>
<div id="container">
<ul id="main">
<li><a href="#" id="open-main-1">Odnośnik</a></li>
<li><a href="#" id="open-main-2">Odnośnik</a></li>
<li><a href="#" id="open-main-3">Odnośnik</a></li>
</ul>
<ul id="main-1">
<li><a href="#">Odnośnik ID 1</a></li>
<li><a href="#">Odnośnik ID 1</a></li>
<li><a href="#">Odnośnik ID 1</a></li>
<li><a href="#">Odnośnik ID 1</a></li>
</ul>
<ul id="main-2">
<li><a href="#">Odnośnik ID 2</a></li>
<li><a href="#">Odnośnik ID 2</a></li>
<li><a href="#">Odnośnik ID 2</a></li>
<li><a href="#">Odnośnik ID 2</a></li>
</ul>
<ul id="main-3">
<li><a href="#">Odnośnik ID 3</a></li>
<li><a href="#">Odnośnik ID 3</a></li>
<li><a href="#">Odnośnik ID 3</a></li>
<li><a href="#">Odnośnik ID 3</a></li>
</ul>
</body>
</html>