Проблема заключается в том что ссылки работают только в развернутом меню (пример-2), а мне нужно что бы ссылки так же работали и в простом пункте (пример-1) . Где допущена ошибка ?
<!doctype html>
<html lang=ru>
<head>
<meta charset=utf-8>
<title>Меню</title>
<style>
.mini-menu{
max-width: 350px;
margin: 0px auto;
font: normal 18px Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
margin: 0;
padding:0;
text-align:left;
}
.mini-menu > ul {
margin-bottom: 0px;
border: 1px solid #222;
box-shadow:0 0 10px #000;
}
.mini-menu > ul > li {
position: relative;
}
.mini-menu > ul > li > a {
display: block;
outline: 0;
padding: .7em 1em;
text-decoration: none;
color:#C9C9C9;
font-weight: normal;
text-shadow: 1px 1px 3px #111;
background: #333;
box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
background-image:linear-gradient(#444, #333);
background-image:-ms-linear-gradient(#444, #333);
border-bottom: 1px solid #222;
}
.mini-menu > ul > li > a:hover{
color:#f2bd00;
}
.mini-menu > ul > li > ul {
counter-reset: items;
height: 0;
overflow: hidden;
background: #eee;
color: #777;
font-size: .95em;
box-shadow:inset 0 0 50px #BBB;
}
.mini-menu > ul > li > ul > li{
counter-increment: items;
padding: .5em 1.3em;
border-bottom: 1px dotted #C9C9C9;
}
.mini-menu > ul > li > ul > li:hover{
background: #ccc;
}
.mini-menu > ul > li > ul > li > a{
color:#514B92;
text-decoration: none;
}
.mini-menu > ul > li > ul > li > a:hover{
color:red;
margin-left: 8px;
}
.mini-menu > ul > li > ul > li > a:after{
content: "»";
float: left;
margin-right:4px;
}
.mini-menu > ul > li > ul:after {
content: counter(items);
font-size: 0.857em;
display:inline-block;
position: absolute;
right: 10px;
top: 19px;
background: #333;
line-height: 1em;
padding: .7em .8em;
margin: -.9em 0 0 0;
color: white;
text-indent: 0;
text-align: center;
text-shadow:0px 1px 0px rgba(0, 0, 0, .5);
font-weight: 500;
border-radius:.769em;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}
</style>
</head>
<body>
<div class="mini-menu">
<ul>
<li>
<a href="vk.com"> Пример-1 </a>
</li>
<li>
<a href="#">Пример-2</a>
<ul>
<li><a href="vk.com">Раздел - 1</a></li>
</ul>
</li>
</ul>
</div>
<!-- Конец Блока Аккордеон -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".mini-menu > ul > li > a").click(function() {
var ul = $(this).next(),
clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
clone.remove();
ul.animate({"height":height});
return false;
});
});
</script>
</body>
</html>
