Показать сообщение отдельно
  #1 (permalink)  
Старый 03.05.2014, 20:59
Аватар для timedo
Аспирант
Отправить личное сообщение для timedo Посмотреть профиль Найти все сообщения от timedo
 
Регистрация: 22.05.2013
Сообщений: 38

Плавная менюшка
Здрасте, с js я не сильно знаком. Пытаюсь сделать плавно выпадающее меню на WP, почти все работает. При на видении мышки на определенное меню, выпадает список, но когда я убираю мышку, то список остается в меню вот так: http://gyazo.com/96ffcfb389ada15abfcc9a4627281eb3, как сделать что б когда я убираю мышку все вставало на свои места.

style.css
Код:
.menu{
	overflow:hidden; 
	list-style:none; 
	font-family: 'Bebas Neue';
	text-transform: none;
	font-size: 24px!important;		
}

.menu li a{
	color: #fff;
	display: block;
	padding: 17px 17px;
}

.menu li {
	list-style: none; 
	float: left;

}

.menu li a{
	-moz-transition: background-color 0.2s 0.1s ease;
	-o-transition: background-color 0.2s 0.1s ease;
	-webkit-transition: background-color 0.2s 0.1s ease;
	display:block;
}

.menu li:hover {
	background: #147e6a;
}

.menu li a:hover {
	background: #147e6a;
	text-decoration: none;
	z-index: 1000;
}

.menu li:hover ul{
	font-size: 14px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	top: 46px;
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	background-color: #147e6a;
	margin-left:0px;
	z-index: 1000;
	float:left;
}

.menu li:hover ul li {
	float: none;
	width: 150px;
	border-right: none;
}

.menu li ul li a:hover {
	color:#EEEEEE;
}

.menu li ul {
	display: none;
}
index.html
<div class="outer">
				<div id="navcontainer">
					<div id="megaMenu" class="megaMenuContainer megaMenu-nojs wpmega-preset-clean-white megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnHover megaFullWidth megaMenuHorizontal wpmega-noconflict">
						<div class="menu">
								<?php wp_list_pages('title_li='); ?>
							</div>
								
						</div>				
					</div>
			</div>



js
<script src="http://code.jquery.com/jquery-latest.js"></script>	
			<script>
				$(document).ready(function(){
				$('.menu').mouseover(function () {
					if ($('.menu').mouseover) {
						$(".children").slideDown("slow");
					} else {
						$(".menu").hide();
					}
				});
			});
			</script>
Ответить с цитированием