Dmitry91,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#nav {
width:520px;
position: relative;
left: 310px;
padding: 0;
z-index: 4;
top: -1px;
}
/* сброс отступов */
*{
margin: 0;
padding: 0;
}
/* убираем маркеры */
#nav{
height: 85px;
}
#nav ul{
list-style: none;
}
/* делаем меню горизонтальным */
#nav > ul > li {
float: left;
width: 130px;
position: relative;
}
/* сделали второе выпадающее меню горизонтальным */
#nav li li {
float: left;
width: 130px;
position: relative;
font-size: 18px;
}
#nav ul ul {
float: left;
width: 520px;
}
/* внешний вид меню */
#nav li a{
display: block;
background: #554a58;
border: 1px solid #554a58;
color: #ffffff;
padding: 8px;
text-align: center;
text-decoration: none;
}
#nav li a:hover,#nav li a.open{
background: #806f83;
display: block;
}
#nav a + ul{
display: none;
}
#nav > ul{
position: relative;
}
#nav a.open + ul{
display: block;
position: absolute;
}
#nav li:nth-child(2) > ul{
left:-100%;
}
#nav li:nth-child(3) > ul{
left:-200%;
}
#nav li:nth-child(4) > ul{
left:-300%;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.querySelector("#nav").addEventListener("click", function(c) {
var d, a = document.querySelector(".open"),
b = c.target;
a && a != b && a.classList.remove("open");
(d = b.classList) && d.contains("btn") && (c.preventDefault(), b.classList.toggle("open"))
})
});
</script>
</head>
<body>
<div id = "nav" class "menu">
<ul>
<li><a href = "#" class="btn">ПУНКТ1</a>
<ul>
<li><a href = "#" >ПОДПУНКТ1</a></li>
<li><a href = "#" >ПОДПУНКТ2</a></li>
<li><a href = "#" >ПОДПУНКТ3</a></li>
<li><a href = "#" >ПОДПУНКТ4</a></li>
</ul>
</li>
<li><a href = "#" class="btn">ПУНКТ2</a>
<ul>
<li><a href = "#">ПОДПУНКТ5</a></li>
<li><a href = "#">ПОДПУНКТ6</a></li>
<li><a href = "#">ПОДПУНКТ7</a></li>
<li><a href = "#">ПОДПУНКТ8</a></li>
</ul>
</li>
<li><a href = "#" class="btn">ПУНКТ3</a>
<ul >
<li><a href = "#">ПОДПУНКТ9</a></li>
<li><a href = "#">ПОДПУНКТ10</a></li>
<li><a href = "#">ПОДПУНКТ11</a></li>
<li><a href = "#">ПОДПУНКТ12</a></li>
</ul>
</li>
<li><a href = "#" class="btn">ПУНКТ4</a>
<ul>
<li><a href = "#">ПОДПУНКТ13</a></li>
<li><a href = "#">ПОДПУНКТ14</a></li>
<li><a href = "#">ПОДПУНКТ15</a></li>
<li><a href = "#">ПОДПУНКТ16</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>