0
У меня проблема, когда мое меню CSS переходит в другое положение, когда оно возвращается назад. Любая идея, как я могу это исправить? JSfiddle здесь: http://jsfiddle.net/KVrFM/2/Выпадающее меню CSS при пересканировании меню
CSS
#header_dropdown {
float: right;
}
.click-nav {
width: 200px;
}
.click-nav ul {
position: relative;
}
.click-nav ul li {
position: relative;
list-style: none;
cursor: pointer;
}
.click-nav ul li ul {
position: absolute;
}
.click-nav ul .clicker {
position: relative;
background: #2284B5;
color: #FFF;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background: #196F9A;
}
.click-nav ul li a {
transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
display: block;
background: #FFF;
color: #333;
text-decoration: none;
}
.click-nav ul li a:hover {
background: #F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display: none;
}
.click-nav .no-js:hover ul {
display: block;
}
.active ul {
padding: 0;
}
JavaScript
$(function() {
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function (e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').parent().toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
HTML
<div id="header_dropdown">
<div class="click-nav">
<ul class="no-js">
<li> <a href="#" class="clicker">Profile</a>
<ul>
<li><a href="#">Dashboard</a>
</li>
<li><a href="#">Settings</a>
</li>
<li><a href="#">Privacy</a>
</li>
<li><a href="#">Help</a>
</li>
<li><a href="#">Sign out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
У вас нет верхнего и левого css для выпадающего списка, это, вероятно, преступник. – drip