Проблема такая, при нажатии на кнопку, показывает список, но он не убирается, если кликнуть вне блока, и еще приходится нажимать на другую кнопку два раза, после того как нажмешь на предыдущую кнопку.
$(document).ready(function() {
var opened = false;
$('.btn-list').click(function(e) {
if (!opened) {
$(this).children('ul').stop(false, false).slideDown('slow');
} else {
$(this).children('ul').stop(false, false).slideUp('');
}
opened = !opened;
});
});
#nav {
margin: 30px;
}
#nav li {
list-style: none;
float: left;
width: 150px;
}
#nav>li>ul {
display: none;
margin-left: -40px;
}
#nav a {
text-decoration: none;
display: block;
padding: 10px;
background: green;
}
#nav > li > ul > li {
position: relative;
}
#nav > li > ul > li > ul {
display: none;
position: absolute;
left: 73%;
top: 0;
}
#nav > li > ul > li:hover > ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<nav>
<ul id="nav">
<li class="btn-list">
<a href="#">Магазин</a>
<ul class="t">
<li><a href="#">Домашня сторiнка</a>
</li>
<li class="r">
<a href="#">Office</a>
<ul class="add-block">
<li><a href="#">Windows</a>
</li>
<li><a href="#">Windows</a>
</li>
<li><a href="#">Windows</a>
</li>
</ul>
</li>
<li><a href="#">Windows</a>
</li>
</ul>
</li>
<li class="btn-list">
<a href="#">Продукты</a>
<ul>
<li><a href="#">Програмне забезпечення та служби</a>
</li>
<li><a href="#">Пристрої та Xbox</a>
</li>
<li><a href="#">Для бiзнесу</a>
</li>
<li><a href="#">Для IT-фахiвцiв i розробникiв</a>
</li>
<li><a href="#">Освiта</a>
</li>
</ul>
</li>
<li><a href="#">Пiдримка</a>
</li>
</ul>
</nav>