|
Сообщение от Nikolay.K
|
|
Как при загрузке страницы скрыть подпункты
|
|
Сообщение от рони
|
|
.submenu { display: none;}
|
у вас css не работает?
вариант без css
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var a = $("nav"),
b = 700,
s = $(".submenu", a);
s.each(function(a, c) {
$(c).parent().on({
mouseenter: function() {
$(c).stop(!0).delay(b).fadeIn(600);
s.not(c).stop(!0).delay(300).fadeOut(600)
b = 100
},
mouseleave: function() {
$(c).stop(!0).delay(300).fadeOut(600)
}
})
}).hide().eq(0).show();
a.on({
mouseleave: function() {
b = 700
}
})
});
</script>
</head>
<body> <nav>
<ul id="nav">
<li><a href="#">Blog</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li class="current-menu-item"><a href="#">Page</a></li>
<li><a href="#">Dropdown</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>